From beb9c862397a34b65037cdca1cef01601fa691bb Mon Sep 17 00:00:00 2001 From: William Kelley Date: Wed, 15 Nov 2023 19:35:11 -0500 Subject: [PATCH] feat!: remove spark library --- .github/workflows/ci:main.yml | 3 - .github/workflows/npm-publish.yml | 38 - .prettierignore | 2 +- README.md | 20 +- libs/spark/.babelrc | 11 - libs/spark/.eslintrc.json | 33 - libs/spark/CHANGELOG.md | 2576 ----------------- libs/spark/LICENSE | 5 - libs/spark/README.md | 71 - libs/spark/jest.config.js | 15 - libs/spark/jest.setup.ts | 4 - libs/spark/package.json | 27 - libs/spark/src/Alert/Alert.tsx | 12 - libs/spark/src/Alert/defaults.tsx | 17 - libs/spark/src/Alert/index.ts | 2 - libs/spark/src/AlertTitle/AlertTitle.ts | 10 - libs/spark/src/AlertTitle/index.ts | 2 - libs/spark/src/Autocomplete/Autocomplete.tsx | 30 - libs/spark/src/Autocomplete/defaults.tsx | 85 - libs/spark/src/Autocomplete/index.ts | 2 - libs/spark/src/Avatar/Avatar.tsx | 130 - libs/spark/src/Avatar/index.ts | 2 - libs/spark/src/Banner/Banner.tsx | 120 - libs/spark/src/Banner/index.ts | 2 - libs/spark/src/Box/Box.ts | 2 - libs/spark/src/Box/index.ts | 2 - libs/spark/src/Breadcrumbs/Breadcrumbs.tsx | 69 - libs/spark/src/Breadcrumbs/index.ts | 2 - libs/spark/src/Button/Button.ts | 12 - libs/spark/src/Button/defaults.ts | 159 - libs/spark/src/Button/index.ts | 2 - libs/spark/src/ButtonBase/ButtonBase.ts | 2 - libs/spark/src/ButtonBase/defaults.ts | 7 - libs/spark/src/ButtonBase/index.ts | 2 - libs/spark/src/Card/Card.tsx | 10 - libs/spark/src/Card/defaults.ts | 12 - libs/spark/src/Card/index.ts | 2 - libs/spark/src/CardActions/CardActions.ts | 2 - libs/spark/src/CardActions/defaults.ts | 11 - libs/spark/src/CardActions/index.ts | 2 - libs/spark/src/CardContent/CardContent.ts | 2 - libs/spark/src/CardContent/defaults.ts | 10 - libs/spark/src/CardContent/index.ts | 2 - libs/spark/src/CardMedia/CardMedia.ts | 2 - libs/spark/src/CardMedia/index.ts | 2 - libs/spark/src/Checkbox/Checkbox.spec.tsx | 58 - libs/spark/src/Checkbox/Checkbox.tsx | 10 - libs/spark/src/Checkbox/CheckboxIcon.tsx | 115 - libs/spark/src/Checkbox/defaults.tsx | 43 - libs/spark/src/Checkbox/index.ts | 2 - .../src/CircularProgress_unstable/index.ts | 10 - libs/spark/src/Collapse/Collapse.tsx | 369 --- libs/spark/src/Collapse/index.ts | 2 - .../src/CssBaseline/CssBaseline.test.tsx | 10 - libs/spark/src/CssBaseline/CssBaseline.ts | 57 - libs/spark/src/CssBaseline/index.ts | 1 - libs/spark/src/Divider/Divider.ts | 12 - libs/spark/src/Divider/defaults.ts | 12 - libs/spark/src/Divider/index.ts | 2 - libs/spark/src/Drawer_unstable/index.ts | 10 - .../src/DropdownAnchor/DropdownAnchor.tsx | 74 - libs/spark/src/DropdownAnchor/index.ts | 2 - .../DropdownContext/DropdownContext.spec.tsx | 10 - .../src/DropdownContext/DropdownContext.tsx | 58 - libs/spark/src/DropdownContext/index.ts | 2 - .../src/DropdownMenu/DropdownMenu.test.tsx | 15 - libs/spark/src/DropdownMenu/DropdownMenu.tsx | 143 - libs/spark/src/DropdownMenu/index.ts | 2 - .../FontFacesBaseline.test.tsx | 10 - .../FontFacesBaseline/FontFacesBaseline.ts | 27 - libs/spark/src/FontFacesBaseline/index.ts | 1 - libs/spark/src/FormControl/FormControl.ts | 14 - libs/spark/src/FormControl/index.ts | 2 - .../src/FormControlLabel/FormControlLabel.ts | 10 - libs/spark/src/FormControlLabel/defaults.ts | 23 - libs/spark/src/FormControlLabel/index.ts | 2 - libs/spark/src/FormGroup/FormGroup.ts | 10 - libs/spark/src/FormGroup/index.ts | 2 - .../src/FormHelperText/FormHelperText.ts | 12 - libs/spark/src/FormHelperText/defaults.ts | 23 - libs/spark/src/FormHelperText/index.ts | 2 - libs/spark/src/FormLabel/FormLabel.ts | 14 - libs/spark/src/FormLabel/defaults.ts | 22 - libs/spark/src/FormLabel/index.ts | 2 - libs/spark/src/Grid/Grid.ts | 2 - libs/spark/src/Grid/index.ts | 2 - libs/spark/src/IconButton/IconButton.spec.tsx | 15 - libs/spark/src/IconButton/IconButton.tsx | 181 -- libs/spark/src/IconButton/defaults.ts | 8 - libs/spark/src/IconButton/index.ts | 2 - libs/spark/src/Input/Input.tsx | 10 - libs/spark/src/Input/defaults.ts | 15 - libs/spark/src/Input/index.ts | 2 - .../src/InputAdornment/InputAdornment.ts | 2 - libs/spark/src/InputAdornment/defaults.ts | 16 - libs/spark/src/InputAdornment/index.ts | 12 - libs/spark/src/InputBase/InputBase.tsx | 12 - libs/spark/src/InputBase/defaults.ts | 91 - libs/spark/src/InputBase/index.ts | 2 - libs/spark/src/InputLabel/InputLabel.ts | 10 - libs/spark/src/InputLabel/defaults.ts | 29 - libs/spark/src/InputLabel/index.ts | 2 - .../src/LinearProgress_unstable/index.ts | 10 - libs/spark/src/Link/Link.tsx | 104 - libs/spark/src/Link/index.ts | 2 - libs/spark/src/List/List.ts | 12 - libs/spark/src/List/defaults.ts | 8 - libs/spark/src/List/index.ts | 2 - libs/spark/src/ListItem/ListItem.ts | 12 - libs/spark/src/ListItem/defaults.ts | 19 - libs/spark/src/ListItem/index.ts | 2 - .../src/ListItemAvatar/ListItemAvatar.ts | 10 - libs/spark/src/ListItemAvatar/defaults.ts | 11 - libs/spark/src/ListItemAvatar/index.ts | 2 - libs/spark/src/ListItemIcon/ListItemIcon.ts | 2 - libs/spark/src/ListItemIcon/defaults.ts | 24 - libs/spark/src/ListItemIcon/index.ts | 10 - .../ListItemSecondaryAction.ts | 10 - .../src/ListItemSecondaryAction/defaults.ts | 10 - .../src/ListItemSecondaryAction/index.ts | 2 - libs/spark/src/ListItemText/ListItemText.ts | 10 - libs/spark/src/ListItemText/defaults.ts | 11 - libs/spark/src/ListItemText/index.ts | 2 - libs/spark/src/ListSubheader/ListSubheader.ts | 12 - libs/spark/src/ListSubheader/defaults.ts | 15 - libs/spark/src/ListSubheader/index.ts | 2 - libs/spark/src/Menu/Menu.ts | 10 - libs/spark/src/Menu/defaults.ts | 30 - libs/spark/src/Menu/index.ts | 2 - libs/spark/src/MenuItem/MenuItem.spec.tsx | 15 - libs/spark/src/MenuItem/MenuItem.ts | 12 - libs/spark/src/MenuItem/defaults.ts | 62 - libs/spark/src/MenuItem/index.ts | 2 - libs/spark/src/MenuList/MenuList.ts | 10 - libs/spark/src/MenuList/index.ts | 2 - libs/spark/src/NavBar/NavBar.spec.tsx | 15 - libs/spark/src/NavBar/NavBar.tsx | 30 - libs/spark/src/NavBar/index.ts | 2 - libs/spark/src/NavBarButton/NavBarButton.tsx | 71 - libs/spark/src/NavBarButton/index.ts | 2 - libs/spark/src/Pagination/Pagination.ts | 2 - libs/spark/src/Pagination/defaults.ts | 37 - libs/spark/src/Pagination/index.ts | 2 - .../src/PaginationItem/PaginationItem.ts | 2 - libs/spark/src/PaginationItem/defaults.ts | 90 - libs/spark/src/PaginationItem/index.ts | 2 - libs/spark/src/Paper/Paper.ts | 10 - libs/spark/src/Paper/index.ts | 2 - libs/spark/src/Radio/Radio.spec.tsx | 30 - libs/spark/src/Radio/Radio.tsx | 10 - libs/spark/src/Radio/RadioIcon.tsx | 84 - libs/spark/src/Radio/defaults.tsx | 48 - libs/spark/src/Radio/index.ts | 2 - libs/spark/src/RadioGroup/RadioGroup.ts | 14 - libs/spark/src/RadioGroup/index.ts | 2 - .../ScopedCssBaseline/ScopedCssBaseline.ts | 2 - libs/spark/src/ScopedCssBaseline/index.ts | 2 - .../src/SectionMessage/SectionMessage.tsx | 99 - libs/spark/src/SectionMessage/index.ts | 2 - .../SectionMessageTitle.ts | 23 - libs/spark/src/SectionMessageTitle/index.ts | 2 - libs/spark/src/Select/Select.ts | 10 - libs/spark/src/Select/defaults.tsx | 44 - libs/spark/src/Select/index.ts | 2 - .../src/SideBarContext_unstable/index.ts | 8 - .../spark/src/SideBarDrawer_unstable/index.ts | 10 - .../src/SideBarListItem_unstable/index.ts | 12 - .../SideBarListSubheader_unstable/index.ts | 10 - libs/spark/src/SideBarList_unstable/index.ts | 10 - .../src/SideBarProvider_unstable/index.ts | 10 - libs/spark/src/Skeleton/Skeleton.ts | 2 - libs/spark/src/Skeleton/index.ts | 12 - .../SparkThemeProvider/SparkThemeProvider.tsx | 22 - libs/spark/src/SparkThemeProvider/index.ts | 1 - libs/spark/src/Step/Step.spec.tsx | 31 - libs/spark/src/Step/Step.tsx | 103 - libs/spark/src/Step/index.ts | 2 - libs/spark/src/StepButton/StepButton.spec.tsx | 16 - libs/spark/src/StepButton/StepButton.tsx | 130 - libs/spark/src/StepButton/index.ts | 2 - .../src/StepConnector/StepConnector.spec.tsx | 11 - .../spark/src/StepConnector/StepConnector.tsx | 145 - libs/spark/src/StepConnector/index.ts | 2 - .../src/StepContent/StepContent.spec.tsx | 32 - libs/spark/src/StepContent/StepContent.tsx | 38 - libs/spark/src/StepContent/index.ts | 2 - libs/spark/src/StepIcon/StepIcon.spec.tsx | 54 - libs/spark/src/StepIcon/StepIcon.tsx | 164 -- libs/spark/src/StepIcon/index.ts | 2 - libs/spark/src/StepLabel/StepLabel.spec.tsx | 18 - libs/spark/src/StepLabel/StepLabel.tsx | 99 - libs/spark/src/StepLabel/index.ts | 2 - libs/spark/src/Stepper/Stepper.spec.tsx | 17 - libs/spark/src/Stepper/Stepper.tsx | 39 - libs/spark/src/Stepper/index.ts | 2 - libs/spark/src/SvgIcon/SvgIcon.tsx | 164 -- libs/spark/src/SvgIcon/index.ts | 2 - libs/spark/src/Switch/Switch.tsx | 47 - libs/spark/src/Switch/defaults.ts | 94 - libs/spark/src/Switch/index.ts | 2 - libs/spark/src/Tab/Tab.ts | 12 - libs/spark/src/Tab/defaults.ts | 48 - libs/spark/src/Tab/index.ts | 2 - libs/spark/src/TabContext/TabContext.ts | 18 - libs/spark/src/TabContext/index.ts | 2 - libs/spark/src/TabList/TabList.ts | 12 - libs/spark/src/TabList/index.ts | 2 - libs/spark/src/TabPanel/TabPanel.ts | 10 - libs/spark/src/TabPanel/defaults.ts | 9 - libs/spark/src/TabPanel/index.ts | 2 - libs/spark/src/Tabs/Tabs.ts | 14 - libs/spark/src/Tabs/defaults.ts | 22 - libs/spark/src/Tabs/index.ts | 2 - libs/spark/src/Tag/Tag.tsx | 337 --- libs/spark/src/Tag/index.ts | 2 - libs/spark/src/TextField/TextField.ts | 18 - libs/spark/src/TextField/index.ts | 2 - libs/spark/src/ThemeProvider/ThemeProvider.ts | 5 - libs/spark/src/ThemeProvider/index.ts | 2 - libs/spark/src/Toolbar/Toolbar.ts | 2 - libs/spark/src/Toolbar/index.ts | 2 - libs/spark/src/TopBar_unstable/index.ts | 10 - libs/spark/src/Typography/Typography.spec.tsx | 15 - libs/spark/src/Typography/Typography.tsx | 171 -- libs/spark/src/Typography/index.ts | 12 - libs/spark/src/Unstable_Autocomplete/index.ts | 32 - libs/spark/src/Unstable_Avatar/index.ts | 12 - libs/spark/src/Unstable_AvatarButton/index.ts | 12 - libs/spark/src/Unstable_Banner/index.ts | 10 - libs/spark/src/Unstable_Button/index.ts | 12 - libs/spark/src/Unstable_Card/index.ts | 12 - libs/spark/src/Unstable_Checkbox/index.ts | 10 - .../spark/src/Unstable_CheckboxField/index.ts | 10 - .../src/Unstable_CheckboxGroupField/index.ts | 8 - .../src/Unstable_CheckboxListItem/index.ts | 12 - .../src/Unstable_CheckboxMenuItem/index.ts | 12 - libs/spark/src/Unstable_ContentGroup/index.ts | 12 - libs/spark/src/Unstable_CssBaseline/index.ts | 4 - libs/spark/src/Unstable_Divider/index.ts | 12 - libs/spark/src/Unstable_Dropdown/index.ts | 8 - .../src/Unstable_DropdownContext/index.ts | 8 - libs/spark/src/Unstable_DropdownMenu/index.ts | 10 - .../src/Unstable_DropdownTrigger/index.ts | 12 - .../src/Unstable_FontFacesBaseline/index.ts | 4 - libs/spark/src/Unstable_FormControl/index.ts | 14 - .../Unstable_FormControlExtraContext/index.ts | 8 - .../src/Unstable_FormControlLabel/index.ts | 10 - libs/spark/src/Unstable_FormGroup/index.ts | 10 - .../src/Unstable_FormHelperText/index.ts | 12 - libs/spark/src/Unstable_FormLabel/index.ts | 12 - libs/spark/src/Unstable_IconButton/index.ts | 12 - libs/spark/src/Unstable_Input/index.ts | 10 - .../src/Unstable_InputAdornment/index.ts | 12 - libs/spark/src/Unstable_Link/index.ts | 12 - libs/spark/src/Unstable_List/index.ts | 12 - libs/spark/src/Unstable_ListItem/index.ts | 12 - .../spark/src/Unstable_ListSubheader/index.ts | 12 - libs/spark/src/Unstable_Menu/index.ts | 10 - libs/spark/src/Unstable_MenuItem/index.ts | 12 - libs/spark/src/Unstable_MenuList/index.ts | 10 - libs/spark/src/Unstable_Modal/index.ts | 4 - libs/spark/src/Unstable_ModalDialog/index.ts | 10 - .../src/Unstable_ModalDialogActions/index.ts | 10 - .../src/Unstable_ModalDialogContent/index.ts | 10 - .../Unstable_ModalDialogContentText/index.ts | 12 - .../src/Unstable_ModalDialogTitle/index.ts | 10 - libs/spark/src/Unstable_Paper/index.ts | 12 - libs/spark/src/Unstable_Radio/index.ts | 10 - libs/spark/src/Unstable_RadioField/index.ts | 8 - libs/spark/src/Unstable_RadioGroup/index.ts | 10 - .../Unstable_RadioGroupExtraContext/index.ts | 8 - .../src/Unstable_RadioGroupField/index.ts | 8 - .../src/Unstable_SectionMessage/index.ts | 10 - libs/spark/src/Unstable_Select/index.ts | 10 - libs/spark/src/Unstable_SvgIcon/index.ts | 12 - libs/spark/src/Unstable_Switch/index.ts | 10 - libs/spark/src/Unstable_SwitchField/index.ts | 8 - libs/spark/src/Unstable_Tab/index.ts | 12 - libs/spark/src/Unstable_TabPanel/index.ts | 10 - libs/spark/src/Unstable_Tabs/index.ts | 12 - libs/spark/src/Unstable_TabsContext/index.ts | 8 - libs/spark/src/Unstable_TabsList/index.ts | 12 - libs/spark/src/Unstable_Tag/index.ts | 12 - libs/spark/src/Unstable_TextField/index.ts | 8 - libs/spark/src/Unstable_Toast/index.ts | 10 - .../spark/src/Unstable_ToastsContext/index.ts | 8 - .../src/Unstable_ToastsProvider/index.ts | 8 - libs/spark/src/Unstable_Tooltip/index.ts | 10 - libs/spark/src/Unstable_Typography/index.ts | 12 - .../Autocomplete/Autocomplete.stories.tsx | 943 ------ .../alpha/Autocomplete/Autocomplete.test.tsx | 12 - .../src/alpha/Autocomplete/Autocomplete.tsx | 1191 -------- libs/spark/src/alpha/Autocomplete/index.ts | 2 - .../spark/src/alpha/Avatar/Avatar.stories.tsx | 119 - libs/spark/src/alpha/Avatar/Avatar.test.tsx | 10 - libs/spark/src/alpha/Avatar/Avatar.tsx | 186 -- libs/spark/src/alpha/Avatar/index.ts | 2 - .../AvatarButton/AvatarButton.stories.tsx | 133 - .../alpha/AvatarButton/AvatarButton.test.tsx | 10 - .../src/alpha/AvatarButton/AvatarButton.tsx | 133 - libs/spark/src/alpha/AvatarButton/index.ts | 2 - .../spark/src/alpha/Banner/Banner.stories.tsx | 64 - libs/spark/src/alpha/Banner/Banner.test.tsx | 10 - libs/spark/src/alpha/Banner/Banner.tsx | 126 - libs/spark/src/alpha/Banner/index.ts | 2 - .../alpha/Breadcrumb/Breadcrumb.stories.tsx | 129 - .../src/alpha/Breadcrumb/Breadcrumb.test.tsx | 10 - .../spark/src/alpha/Breadcrumb/Breadcrumb.tsx | 119 - libs/spark/src/alpha/Breadcrumb/index.ts | 2 - .../alpha/Breadcrumbs/Breadcrumbs.stories.tsx | 34 - .../alpha/Breadcrumbs/Breadcrumbs.test.tsx | 10 - .../src/alpha/Breadcrumbs/Breadcrumbs.tsx | 78 - libs/spark/src/alpha/Breadcrumbs/index.ts | 2 - .../spark/src/alpha/Button/Button.stories.tsx | 218 -- libs/spark/src/alpha/Button/Button.test.tsx | 10 - libs/spark/src/alpha/Button/Button.tsx | 545 ---- libs/spark/src/alpha/Button/index.ts | 2 - libs/spark/src/alpha/Card/Card.stories.tsx | 38 - libs/spark/src/alpha/Card/Card.test.tsx | 10 - libs/spark/src/alpha/Card/Card.tsx | 85 - libs/spark/src/alpha/Card/index.ts | 2 - .../src/alpha/Checkbox/Checkbox.stories.tsx | 178 -- .../src/alpha/Checkbox/Checkbox.test.tsx | 10 - libs/spark/src/alpha/Checkbox/Checkbox.tsx | 78 - .../spark/src/alpha/Checkbox/CheckboxIcon.tsx | 191 -- libs/spark/src/alpha/Checkbox/index.ts | 2 - .../CheckboxField/CheckboxField.stories.tsx | 50 - .../CheckboxField/CheckboxField.test.tsx | 12 - .../src/alpha/CheckboxField/CheckboxField.tsx | 115 - libs/spark/src/alpha/CheckboxField/index.ts | 2 - .../CheckboxGroupField.stories.tsx | 186 -- .../CheckboxGroupField.test.tsx | 17 - .../CheckboxGroupField/CheckboxGroupField.tsx | 111 - .../src/alpha/CheckboxGroupField/index.ts | 2 - .../CheckboxListItem.stories.tsx | 82 - .../CheckboxListItem.test.tsx | 30 - .../CheckboxListItem/CheckboxListItem.tsx | 188 -- .../spark/src/alpha/CheckboxListItem/index.ts | 2 - .../CheckboxMenuItem.stories.tsx | 42 - .../CheckboxMenuItem.test.tsx | 12 - .../CheckboxMenuItem/CheckboxMenuItem.tsx | 114 - .../spark/src/alpha/CheckboxMenuItem/index.ts | 2 - .../CircularProgress.stories.tsx | 112 - .../CircularProgress.test.tsx | 10 - .../CircularProgress/CircularProgress.tsx | 217 -- .../spark/src/alpha/CircularProgress/index.ts | 2 - .../ContentGroup/ContentGroup.stories.tsx | 503 ---- .../alpha/ContentGroup/ContentGroup.test.tsx | 10 - .../src/alpha/ContentGroup/ContentGroup.tsx | 380 --- libs/spark/src/alpha/ContentGroup/index.ts | 2 - .../alpha/CssBaseline/CssBaseline.test.tsx | 10 - .../src/alpha/CssBaseline/CssBaseline.ts | 48 - libs/spark/src/alpha/CssBaseline/index.ts | 1 - .../src/alpha/Divider/Divider.stories.tsx | 52 - libs/spark/src/alpha/Divider/Divider.test.tsx | 10 - libs/spark/src/alpha/Divider/Divider.tsx | 83 - libs/spark/src/alpha/Divider/index.ts | 2 - libs/spark/src/alpha/Drawer/Drawer.spec.tsx | 10 - libs/spark/src/alpha/Drawer/Drawer.tsx | 104 - libs/spark/src/alpha/Drawer/index.ts | 2 - .../src/alpha/Dropdown/Dropdown.spec.tsx | 10 - .../src/alpha/Dropdown/Dropdown.stories.tsx | 130 - libs/spark/src/alpha/Dropdown/Dropdown.tsx | 40 - libs/spark/src/alpha/Dropdown/index.ts | 2 - .../alpha/DropdownContext/DropdownContext.ts | 18 - libs/spark/src/alpha/DropdownContext/index.ts | 2 - .../alpha/DropdownMenu/DropdownMenu.test.tsx | 15 - .../src/alpha/DropdownMenu/DropdownMenu.tsx | 142 - libs/spark/src/alpha/DropdownMenu/index.ts | 2 - .../DropdownTrigger/DropdownTrigger.test.tsx | 15 - .../alpha/DropdownTrigger/DropdownTrigger.tsx | 103 - libs/spark/src/alpha/DropdownTrigger/index.ts | 2 - .../FontFacesBaseline.test.tsx | 10 - .../FontFacesBaseline/FontFacesBaseline.ts | 25 - .../src/alpha/FontFacesBaseline/index.ts | 1 - .../alpha/FormControl/FormControl.stories.tsx | 218 -- .../alpha/FormControl/FormControl.test.tsx | 10 - .../src/alpha/FormControl/FormControl.tsx | 131 - .../src/alpha/FormControl/formControlState.ts | 1 - libs/spark/src/alpha/FormControl/index.ts | 3 - .../FormControlExtraContext.ts | 22 - .../alpha/FormControlExtraContext/index.ts | 2 - .../FormControlLabel.stories.tsx | 220 -- .../FormControlLabel.test.tsx | 13 - .../FormControlLabel/FormControlLabel.tsx | 102 - .../spark/src/alpha/FormControlLabel/index.ts | 2 - .../src/alpha/FormGroup/FormGroup.stories.tsx | 67 - .../src/alpha/FormGroup/FormGroup.test.tsx | 10 - libs/spark/src/alpha/FormGroup/FormGroup.tsx | 30 - libs/spark/src/alpha/FormGroup/index.ts | 2 - .../FormHelperText/FormHelperText.stories.tsx | 137 - .../FormHelperText/FormHelperText.test.tsx | 10 - .../alpha/FormHelperText/FormHelperText.tsx | 176 -- libs/spark/src/alpha/FormHelperText/index.ts | 2 - .../src/alpha/FormLabel/FormLabel.stories.tsx | 63 - .../src/alpha/FormLabel/FormLabel.test.tsx | 10 - libs/spark/src/alpha/FormLabel/FormLabel.tsx | 150 - libs/spark/src/alpha/FormLabel/index.ts | 2 - .../alpha/IconButton/IconButton.stories.tsx | 156 - .../src/alpha/IconButton/IconButton.test.tsx | 10 - .../spark/src/alpha/IconButton/IconButton.tsx | 235 -- libs/spark/src/alpha/IconButton/index.ts | 2 - libs/spark/src/alpha/Input/Input.stories.tsx | 230 -- libs/spark/src/alpha/Input/Input.test.tsx | 10 - libs/spark/src/alpha/Input/Input.tsx | 313 -- libs/spark/src/alpha/Input/index.ts | 2 - .../InputAdornment/InputAdornment.stories.tsx | 53 - .../InputAdornment/InputAdornment.test.tsx | 12 - .../alpha/InputAdornment/InputAdornment.tsx | 126 - libs/spark/src/alpha/InputAdornment/index.ts | 2 - .../LinearProgress/LinearProgress.stories.tsx | 127 - .../LinearProgress/LinearProgress.test.tsx | 10 - .../alpha/LinearProgress/LinearProgress.tsx | 193 -- libs/spark/src/alpha/LinearProgress/index.ts | 2 - libs/spark/src/alpha/Link/Link.stories.tsx | 161 -- libs/spark/src/alpha/Link/Link.test.tsx | 10 - libs/spark/src/alpha/Link/Link.tsx | 153 - libs/spark/src/alpha/Link/index.ts | 2 - libs/spark/src/alpha/List/List.stories.tsx | 282 -- libs/spark/src/alpha/List/List.test.tsx | 10 - libs/spark/src/alpha/List/List.tsx | 105 - libs/spark/src/alpha/List/index.ts | 2 - .../src/alpha/ListItem/ListItem.stories.tsx | 388 --- .../src/alpha/ListItem/ListItem.test.tsx | 10 - libs/spark/src/alpha/ListItem/ListItem.tsx | 239 -- libs/spark/src/alpha/ListItem/index.ts | 2 - .../ListSubheader/ListSubheader.stories.tsx | 26 - .../ListSubheader/ListSubheader.test.tsx | 10 - .../src/alpha/ListSubheader/ListSubheader.tsx | 92 - libs/spark/src/alpha/ListSubheader/index.ts | 2 - libs/spark/src/alpha/Menu/Menu.stories.tsx | 89 - libs/spark/src/alpha/Menu/Menu.test.tsx | 12 - libs/spark/src/alpha/Menu/Menu.tsx | 99 - libs/spark/src/alpha/Menu/index.ts | 2 - .../src/alpha/MenuItem/MenuItem.stories.tsx | 54 - .../src/alpha/MenuItem/MenuItem.test.tsx | 10 - libs/spark/src/alpha/MenuItem/MenuItem.tsx | 92 - libs/spark/src/alpha/MenuItem/index.ts | 2 - .../src/alpha/MenuList/MenuList.stories.tsx | 47 - .../src/alpha/MenuList/MenuList.test.tsx | 10 - libs/spark/src/alpha/MenuList/MenuList.tsx | 41 - libs/spark/src/alpha/MenuList/index.ts | 2 - libs/spark/src/alpha/Modal/Modal.ts | 18 - libs/spark/src/alpha/Modal/index.ts | 1 - .../alpha/ModalDialog/ModalDialog.stories.tsx | 52 - .../alpha/ModalDialog/ModalDialog.test.tsx | 10 - .../src/alpha/ModalDialog/ModalDialog.tsx | 105 - libs/spark/src/alpha/ModalDialog/index.ts | 2 - .../ModalDialogActions.stories.tsx | 33 - .../ModalDialogActions.test.tsx | 10 - .../ModalDialogActions/ModalDialogActions.tsx | 46 - .../src/alpha/ModalDialogActions/index.ts | 2 - .../ModalDialogContent.stories.tsx | 22 - .../ModalDialogContent.test.tsx | 10 - .../ModalDialogContent/ModalDialogContent.tsx | 48 - .../src/alpha/ModalDialogContent/index.ts | 2 - .../ModalDialogContentText.stories.tsx | 22 - .../ModalDialogContentText.test.tsx | 12 - .../ModalDialogContentText.tsx | 44 - .../src/alpha/ModalDialogContentText/index.ts | 2 - .../ModalDialogTitle.stories.tsx | 20 - .../ModalDialogTitle.test.tsx | 10 - .../ModalDialogTitle/ModalDialogTitle.tsx | 58 - .../spark/src/alpha/ModalDialogTitle/index.ts | 2 - libs/spark/src/alpha/Paper/Paper.stories.tsx | 28 - libs/spark/src/alpha/Paper/Paper.test.tsx | 10 - libs/spark/src/alpha/Paper/Paper.tsx | 247 -- libs/spark/src/alpha/Paper/index.ts | 2 - libs/spark/src/alpha/Radio/Radio.stories.tsx | 119 - libs/spark/src/alpha/Radio/Radio.test.tsx | 10 - libs/spark/src/alpha/Radio/Radio.tsx | 86 - libs/spark/src/alpha/Radio/RadioIcon.tsx | 143 - libs/spark/src/alpha/Radio/index.ts | 2 - .../alpha/RadioField/RadioField.stories.tsx | 42 - .../src/alpha/RadioField/RadioField.test.tsx | 12 - .../spark/src/alpha/RadioField/RadioField.tsx | 95 - libs/spark/src/alpha/RadioField/index.ts | 2 - .../alpha/RadioGroup/RadioGroup.stories.tsx | 65 - .../src/alpha/RadioGroup/RadioGroup.test.tsx | 10 - .../spark/src/alpha/RadioGroup/RadioGroup.tsx | 56 - libs/spark/src/alpha/RadioGroup/index.ts | 2 - .../RadioGroupExtraContext.ts | 18 - .../src/alpha/RadioGroupExtraContext/index.ts | 2 - .../RadioGroupField.stories.tsx | 248 -- .../RadioGroupField/RadioGroupField.test.tsx | 17 - .../alpha/RadioGroupField/RadioGroupField.tsx | 122 - libs/spark/src/alpha/RadioGroupField/index.ts | 2 - .../SectionMessage/SectionMessage.stories.tsx | 96 - .../SectionMessage/SectionMessage.test.tsx | 12 - .../alpha/SectionMessage/SectionMessage.tsx | 126 - libs/spark/src/alpha/SectionMessage/index.ts | 2 - .../spark/src/alpha/Select/Select.stories.tsx | 213 -- libs/spark/src/alpha/Select/Select.test.tsx | 15 - libs/spark/src/alpha/Select/Select.tsx | 362 --- libs/spark/src/alpha/Select/index.ts | 2 - .../alpha/SideBarContext/SideBarContext.ts | 24 - libs/spark/src/alpha/SideBarContext/index.ts | 2 - .../SideBarDrawer/SideBarDrawer.spec.tsx | 15 - .../src/alpha/SideBarDrawer/SideBarDrawer.tsx | 108 - libs/spark/src/alpha/SideBarDrawer/index.ts | 2 - .../alpha/SideBarList/SideBarList.spec.tsx | 10 - .../src/alpha/SideBarList/SideBarList.tsx | 21 - libs/spark/src/alpha/SideBarList/index.ts | 2 - .../SideBarListItem/SideBarListItem.spec.tsx | 15 - .../alpha/SideBarListItem/SideBarListItem.tsx | 111 - libs/spark/src/alpha/SideBarListItem/index.ts | 2 - .../SideBarListSubheader.spec.tsx | 10 - .../SideBarListSubheader.ts | 30 - .../src/alpha/SideBarListSubheader/index.ts | 2 - .../SideBarProvider/SideBarProvider.spec.tsx | 10 - .../SideBarProvider.stories.tsx | 72 - .../alpha/SideBarProvider/SideBarProvider.tsx | 125 - libs/spark/src/alpha/SideBarProvider/index.ts | 2 - libs/spark/src/alpha/Skeleton/Skeleton.ts | 2 - libs/spark/src/alpha/Skeleton/index.ts | 2 - libs/spark/src/alpha/SvgIcon/SvgIcon.spec.tsx | 14 - .../src/alpha/SvgIcon/SvgIcon.stories.tsx | 71 - libs/spark/src/alpha/SvgIcon/SvgIcon.tsx | 121 - libs/spark/src/alpha/SvgIcon/index.ts | 2 - .../spark/src/alpha/Switch/Switch.stories.tsx | 123 - libs/spark/src/alpha/Switch/Switch.test.tsx | 10 - libs/spark/src/alpha/Switch/Switch.tsx | 185 -- libs/spark/src/alpha/Switch/index.ts | 2 - .../alpha/SwitchField/SwitchField.stories.tsx | 65 - .../alpha/SwitchField/SwitchField.test.tsx | 12 - .../src/alpha/SwitchField/SwitchField.tsx | 121 - libs/spark/src/alpha/SwitchField/index.ts | 2 - libs/spark/src/alpha/Tab/Tab.stories.tsx | 103 - libs/spark/src/alpha/Tab/Tab.test.tsx | 15 - libs/spark/src/alpha/Tab/Tab.tsx | 170 -- libs/spark/src/alpha/Tab/index.ts | 2 - .../src/alpha/TabPanel/TabPanel.stories.tsx | 37 - .../src/alpha/TabPanel/TabPanel.test.tsx | 15 - libs/spark/src/alpha/TabPanel/TabPanel.tsx | 30 - libs/spark/src/alpha/TabPanel/index.ts | 2 - libs/spark/src/alpha/Tabs/Tabs.stories.tsx | 62 - libs/spark/src/alpha/Tabs/Tabs.test.tsx | 10 - libs/spark/src/alpha/Tabs/Tabs.tsx | 134 - libs/spark/src/alpha/Tabs/index.ts | 2 - .../src/alpha/TabsContext/TabsContext.ts | 29 - libs/spark/src/alpha/TabsContext/index.ts | 2 - .../src/alpha/TabsList/TabsList.stories.tsx | 83 - .../src/alpha/TabsList/TabsList.test.tsx | 15 - libs/spark/src/alpha/TabsList/TabsList.tsx | 141 - libs/spark/src/alpha/TabsList/index.ts | 2 - libs/spark/src/alpha/Tag/Tag.stories.tsx | 250 -- libs/spark/src/alpha/Tag/Tag.test.tsx | 10 - libs/spark/src/alpha/Tag/Tag.tsx | 511 ---- libs/spark/src/alpha/Tag/index.ts | 2 - .../src/alpha/TextField/TextField.stories.tsx | 354 --- .../src/alpha/TextField/TextField.test.tsx | 10 - libs/spark/src/alpha/TextField/TextField.tsx | 225 -- libs/spark/src/alpha/TextField/index.ts | 2 - libs/spark/src/alpha/Toast/Toast.stories.tsx | 48 - libs/spark/src/alpha/Toast/Toast.test.tsx | 10 - libs/spark/src/alpha/Toast/Toast.tsx | 105 - libs/spark/src/alpha/Toast/index.ts | 2 - .../alpha/ToastsContext/ToastsContext.d.ts | 68 - libs/spark/src/alpha/ToastsContext/index.ts | 1 - .../ToastsProvider/ToastsProvider.stories.tsx | 234 -- .../ToastsProvider/ToastsProvider.test.tsx | 14 - .../alpha/ToastsProvider/ToastsProvider.tsx | 79 - libs/spark/src/alpha/ToastsProvider/index.ts | 2 - .../src/alpha/Tooltip/Tooltip.stories.tsx | 76 - libs/spark/src/alpha/Tooltip/Tooltip.test.tsx | 14 - libs/spark/src/alpha/Tooltip/Tooltip.tsx | 115 - libs/spark/src/alpha/Tooltip/index.ts | 2 - libs/spark/src/alpha/TopBar/TopBar.spec.tsx | 10 - .../spark/src/alpha/TopBar/TopBar.stories.tsx | 39 - libs/spark/src/alpha/TopBar/TopBar.tsx | 88 - libs/spark/src/alpha/TopBar/index.ts | 2 - .../src/alpha/Typography/Typography.spec.tsx | 10 - .../alpha/Typography/Typography.stories.tsx | 86 - .../spark/src/alpha/Typography/Typography.tsx | 230 -- libs/spark/src/alpha/Typography/index.ts | 2 - .../createSvgIcon/createSvgIcon.test.tsx | 23 - .../src/alpha/createSvgIcon/createSvgIcon.tsx | 43 - libs/spark/src/alpha/createSvgIcon/index.ts | 1 - libs/spark/src/alpha/index.ts | 235 -- libs/spark/src/alpha/internal/Alert.tsx | 119 - .../spark/src/alpha/internal/AlertOctagon.tsx | 7 - .../src/alpha/internal/AlertTriangle.tsx | 7 - .../spark/src/alpha/internal/CheckCircle2.tsx | 7 - libs/spark/src/alpha/internal/ChevronDown.tsx | 7 - libs/spark/src/alpha/internal/Cross.tsx | 7 - libs/spark/src/alpha/internal/CrossSmall.tsx | 8 - libs/spark/src/alpha/internal/Filter.tsx | 10 - libs/spark/src/alpha/internal/Info.tsx | 7 - .../spark/src/alpha/theme/borders.stories.tsx | 174 -- libs/spark/src/alpha/theme/borders.ts | 41 - .../src/alpha/theme/fontFaces.stories.tsx | 512 ---- libs/spark/src/alpha/theme/fontFaces.ts | 176 -- .../spark/src/alpha/theme/palette.stories.tsx | 478 --- libs/spark/src/alpha/theme/palette.ts | 253 -- libs/spark/src/alpha/theme/radii.stories.tsx | 111 - libs/spark/src/alpha/theme/radii.ts | 23 - .../spark/src/alpha/theme/shadows.stories.tsx | 160 - libs/spark/src/alpha/theme/shadows.ts | 35 - .../src/alpha/theme/typography.stories.tsx | 328 --- libs/spark/src/alpha/theme/typography.ts | 115 - libs/spark/src/alpha/useAutocomplete/index.ts | 2 - .../alpha/useAutocomplete/useAutocomplete.ts | 151 - .../useAutocomplete/useAutocomplete_mui.ts | 92 - libs/spark/src/alpha/useDropdown/index.ts | 1 - .../src/alpha/useDropdown/useDropdown.ts | 9 - libs/spark/src/alpha/useFormControl/index.ts | 2 - .../alpha/useFormControl/useFormControl.ts | 149 - .../src/alpha/useFormControlExtra/index.ts | 1 - .../useFormControlExtra.ts | 76 - libs/spark/src/alpha/useMediaQuery/index.ts | 1 - .../alpha/useMediaQuery/useMediaQuery.test.ts | 12 - .../src/alpha/useMediaQuery/useMediaQuery.ts | 18 - .../src/alpha/useRadioGroupExtra/index.ts | 1 - .../useRadioGroupExtra/useRadioGroupExtra.ts | 8 - libs/spark/src/alpha/useSideBar/index.ts | 1 - libs/spark/src/alpha/useSideBar/useSideBar.ts | 6 - .../src/alpha/useSideBarTrigger/index.ts | 1 - .../useSideBarTrigger/useSideBarTrigger.ts | 97 - libs/spark/src/alpha/useTabs/index.ts | 1 - libs/spark/src/alpha/useTabs/useTabs.ts | 16 - libs/spark/src/alpha/useTheme/index.ts | 1 - .../spark/src/alpha/useTheme/useTheme.test.ts | 13 - libs/spark/src/alpha/useTheme/useTheme.ts | 15 - libs/spark/src/alpha/useToasts/index.ts | 1 - libs/spark/src/alpha/useToasts/useToasts.ts | 62 - .../spark/src/createSvgIcon_unstable/index.ts | 4 - libs/spark/src/index.ts | 464 --- .../spark/src/internal/AlertOctagonFilled.tsx | 10 - libs/spark/src/internal/AlertThick.tsx | 10 - .../src/internal/AlertTriangleFilled.tsx | 10 - libs/spark/src/internal/ArrowRight.tsx | 10 - libs/spark/src/internal/CheckCircleFilled.tsx | 10 - libs/spark/src/internal/CheckThick.tsx | 10 - libs/spark/src/internal/ChevronDown.tsx | 10 - libs/spark/src/internal/ChevronRight.tsx | 10 - libs/spark/src/internal/Cross.tsx | 10 - libs/spark/src/internal/CrossSmall.tsx | 11 - libs/spark/src/internal/InfoFilled.tsx | 10 - libs/spark/src/internal/index.ts | 11 - libs/spark/src/makeStyles/index.ts | 1 - libs/spark/src/makeStyles/makeStyles.spec.tsx | 21 - libs/spark/src/makeStyles/makeStyles.ts | 22 - libs/spark/src/styled/index.ts | 2 - libs/spark/src/styled/styled.spec.tsx | 18 - libs/spark/src/styled/styled.ts | 48 - libs/spark/src/theme/fontFaces.ts | 87 - libs/spark/src/theme/index.ts | 2 - libs/spark/src/theme/initialTheme.ts | 28 - libs/spark/src/theme/overrides.ts | 70 - libs/spark/src/theme/palette.ts | 129 - libs/spark/src/theme/props.ts | 34 - libs/spark/src/theme/shadows.ts | 54 - libs/spark/src/theme/theme.ts | 55 - libs/spark/src/theme/themeAugmentation.ts | 205 -- libs/spark/src/theme/typography.ts | 132 - libs/spark/src/unstable_createSvgIcon.tsx | 6 - .../src/useAutocomplete_unstable/index.ts | 32 - libs/spark/src/useDropdown_unstable/index.ts | 4 - libs/spark/src/useFormControl/index.ts | 1 - .../src/useFormControl/useFormControl.ts | 4 - .../src/useFormControlExtra_unstable/index.ts | 4 - .../src/useFormControl_unstable/index.ts | 12 - libs/spark/src/useMediaQuery/index.ts | 1 - libs/spark/src/useMediaQuery/useMediaQuery.ts | 4 - .../spark/src/useMediaQuery_unstable/index.ts | 4 - .../src/useRadioGroupExtra_unstable/index.ts | 4 - .../src/useSideBarTrigger_unstable/index.ts | 4 - libs/spark/src/useSideBar_unstable/index.ts | 4 - libs/spark/src/useTabs_unstable/index.ts | 4 - libs/spark/src/useTheme/index.ts | 1 - libs/spark/src/useTheme/useTheme.ts | 4 - libs/spark/src/useTheme_unstable/index.ts | 4 - libs/spark/src/useToasts_unstable/index.ts | 4 - libs/spark/src/utils/ClassNameMap.ts | 5 - libs/spark/src/utils/OverridableComponent.ts | 4 - libs/spark/src/utils/StandardProps.ts | 19 - libs/spark/src/utils/capitalize.ts | 10 - libs/spark/src/utils/createSvgIcon.tsx | 42 - libs/spark/src/utils/index.ts | 19 - libs/spark/src/utils/useClassesCapture.ts | 38 - libs/spark/src/utils/useControlled.ts | 2 - libs/spark/src/utils/useId.ts | 39 - libs/spark/src/utils/useMergeClasses.ts | 23 - libs/spark/src/utils/useUniqueId.ts | 16 - libs/spark/src/withStyles/index.ts | 2 - libs/spark/src/withStyles/withStyles.spec.tsx | 18 - libs/spark/src/withStyles/withStyles.ts | 61 - libs/spark/tsconfig.build.json | 14 - libs/spark/tsconfig.json | 22 - libs/spark/tsconfig.lib.json | 25 - libs/spark/tsconfig.spec.json | 19 - package-lock.json | 297 +- package.json | 10 +- tsconfig.base.json | 4 +- workspace.json | 51 +- 695 files changed, 19 insertions(+), 34914 deletions(-) delete mode 100644 libs/spark/.babelrc delete mode 100644 libs/spark/.eslintrc.json delete mode 100644 libs/spark/CHANGELOG.md delete mode 100644 libs/spark/LICENSE delete mode 100644 libs/spark/README.md delete mode 100644 libs/spark/jest.config.js delete mode 100644 libs/spark/jest.setup.ts delete mode 100644 libs/spark/package.json delete mode 100644 libs/spark/src/Alert/Alert.tsx delete mode 100644 libs/spark/src/Alert/defaults.tsx delete mode 100644 libs/spark/src/Alert/index.ts delete mode 100644 libs/spark/src/AlertTitle/AlertTitle.ts delete mode 100644 libs/spark/src/AlertTitle/index.ts delete mode 100644 libs/spark/src/Autocomplete/Autocomplete.tsx delete mode 100644 libs/spark/src/Autocomplete/defaults.tsx delete mode 100644 libs/spark/src/Autocomplete/index.ts delete mode 100644 libs/spark/src/Avatar/Avatar.tsx delete mode 100644 libs/spark/src/Avatar/index.ts delete mode 100644 libs/spark/src/Banner/Banner.tsx delete mode 100644 libs/spark/src/Banner/index.ts delete mode 100644 libs/spark/src/Box/Box.ts delete mode 100644 libs/spark/src/Box/index.ts delete mode 100644 libs/spark/src/Breadcrumbs/Breadcrumbs.tsx delete mode 100644 libs/spark/src/Breadcrumbs/index.ts delete mode 100644 libs/spark/src/Button/Button.ts delete mode 100644 libs/spark/src/Button/defaults.ts delete mode 100644 libs/spark/src/Button/index.ts delete mode 100644 libs/spark/src/ButtonBase/ButtonBase.ts delete mode 100644 libs/spark/src/ButtonBase/defaults.ts delete mode 100644 libs/spark/src/ButtonBase/index.ts delete mode 100644 libs/spark/src/Card/Card.tsx delete mode 100644 libs/spark/src/Card/defaults.ts delete mode 100644 libs/spark/src/Card/index.ts delete mode 100644 libs/spark/src/CardActions/CardActions.ts delete mode 100644 libs/spark/src/CardActions/defaults.ts delete mode 100644 libs/spark/src/CardActions/index.ts delete mode 100644 libs/spark/src/CardContent/CardContent.ts delete mode 100644 libs/spark/src/CardContent/defaults.ts delete mode 100644 libs/spark/src/CardContent/index.ts delete mode 100644 libs/spark/src/CardMedia/CardMedia.ts delete mode 100644 libs/spark/src/CardMedia/index.ts delete mode 100644 libs/spark/src/Checkbox/Checkbox.spec.tsx delete mode 100644 libs/spark/src/Checkbox/Checkbox.tsx delete mode 100644 libs/spark/src/Checkbox/CheckboxIcon.tsx delete mode 100644 libs/spark/src/Checkbox/defaults.tsx delete mode 100644 libs/spark/src/Checkbox/index.ts delete mode 100644 libs/spark/src/CircularProgress_unstable/index.ts delete mode 100644 libs/spark/src/Collapse/Collapse.tsx delete mode 100644 libs/spark/src/Collapse/index.ts delete mode 100644 libs/spark/src/CssBaseline/CssBaseline.test.tsx delete mode 100644 libs/spark/src/CssBaseline/CssBaseline.ts delete mode 100644 libs/spark/src/CssBaseline/index.ts delete mode 100644 libs/spark/src/Divider/Divider.ts delete mode 100644 libs/spark/src/Divider/defaults.ts delete mode 100644 libs/spark/src/Divider/index.ts delete mode 100644 libs/spark/src/Drawer_unstable/index.ts delete mode 100644 libs/spark/src/DropdownAnchor/DropdownAnchor.tsx delete mode 100644 libs/spark/src/DropdownAnchor/index.ts delete mode 100644 libs/spark/src/DropdownContext/DropdownContext.spec.tsx delete mode 100644 libs/spark/src/DropdownContext/DropdownContext.tsx delete mode 100644 libs/spark/src/DropdownContext/index.ts delete mode 100644 libs/spark/src/DropdownMenu/DropdownMenu.test.tsx delete mode 100644 libs/spark/src/DropdownMenu/DropdownMenu.tsx delete mode 100644 libs/spark/src/DropdownMenu/index.ts delete mode 100644 libs/spark/src/FontFacesBaseline/FontFacesBaseline.test.tsx delete mode 100644 libs/spark/src/FontFacesBaseline/FontFacesBaseline.ts delete mode 100644 libs/spark/src/FontFacesBaseline/index.ts delete mode 100644 libs/spark/src/FormControl/FormControl.ts delete mode 100644 libs/spark/src/FormControl/index.ts delete mode 100644 libs/spark/src/FormControlLabel/FormControlLabel.ts delete mode 100644 libs/spark/src/FormControlLabel/defaults.ts delete mode 100644 libs/spark/src/FormControlLabel/index.ts delete mode 100644 libs/spark/src/FormGroup/FormGroup.ts delete mode 100644 libs/spark/src/FormGroup/index.ts delete mode 100644 libs/spark/src/FormHelperText/FormHelperText.ts delete mode 100644 libs/spark/src/FormHelperText/defaults.ts delete mode 100644 libs/spark/src/FormHelperText/index.ts delete mode 100644 libs/spark/src/FormLabel/FormLabel.ts delete mode 100644 libs/spark/src/FormLabel/defaults.ts delete mode 100644 libs/spark/src/FormLabel/index.ts delete mode 100644 libs/spark/src/Grid/Grid.ts delete mode 100644 libs/spark/src/Grid/index.ts delete mode 100644 libs/spark/src/IconButton/IconButton.spec.tsx delete mode 100644 libs/spark/src/IconButton/IconButton.tsx delete mode 100644 libs/spark/src/IconButton/defaults.ts delete mode 100644 libs/spark/src/IconButton/index.ts delete mode 100644 libs/spark/src/Input/Input.tsx delete mode 100644 libs/spark/src/Input/defaults.ts delete mode 100644 libs/spark/src/Input/index.ts delete mode 100644 libs/spark/src/InputAdornment/InputAdornment.ts delete mode 100644 libs/spark/src/InputAdornment/defaults.ts delete mode 100644 libs/spark/src/InputAdornment/index.ts delete mode 100644 libs/spark/src/InputBase/InputBase.tsx delete mode 100644 libs/spark/src/InputBase/defaults.ts delete mode 100644 libs/spark/src/InputBase/index.ts delete mode 100644 libs/spark/src/InputLabel/InputLabel.ts delete mode 100644 libs/spark/src/InputLabel/defaults.ts delete mode 100644 libs/spark/src/InputLabel/index.ts delete mode 100644 libs/spark/src/LinearProgress_unstable/index.ts delete mode 100644 libs/spark/src/Link/Link.tsx delete mode 100644 libs/spark/src/Link/index.ts delete mode 100644 libs/spark/src/List/List.ts delete mode 100644 libs/spark/src/List/defaults.ts delete mode 100644 libs/spark/src/List/index.ts delete mode 100644 libs/spark/src/ListItem/ListItem.ts delete mode 100644 libs/spark/src/ListItem/defaults.ts delete mode 100644 libs/spark/src/ListItem/index.ts delete mode 100644 libs/spark/src/ListItemAvatar/ListItemAvatar.ts delete mode 100644 libs/spark/src/ListItemAvatar/defaults.ts delete mode 100644 libs/spark/src/ListItemAvatar/index.ts delete mode 100644 libs/spark/src/ListItemIcon/ListItemIcon.ts delete mode 100644 libs/spark/src/ListItemIcon/defaults.ts delete mode 100644 libs/spark/src/ListItemIcon/index.ts delete mode 100644 libs/spark/src/ListItemSecondaryAction/ListItemSecondaryAction.ts delete mode 100644 libs/spark/src/ListItemSecondaryAction/defaults.ts delete mode 100644 libs/spark/src/ListItemSecondaryAction/index.ts delete mode 100644 libs/spark/src/ListItemText/ListItemText.ts delete mode 100644 libs/spark/src/ListItemText/defaults.ts delete mode 100644 libs/spark/src/ListItemText/index.ts delete mode 100644 libs/spark/src/ListSubheader/ListSubheader.ts delete mode 100644 libs/spark/src/ListSubheader/defaults.ts delete mode 100644 libs/spark/src/ListSubheader/index.ts delete mode 100644 libs/spark/src/Menu/Menu.ts delete mode 100644 libs/spark/src/Menu/defaults.ts delete mode 100644 libs/spark/src/Menu/index.ts delete mode 100644 libs/spark/src/MenuItem/MenuItem.spec.tsx delete mode 100644 libs/spark/src/MenuItem/MenuItem.ts delete mode 100644 libs/spark/src/MenuItem/defaults.ts delete mode 100644 libs/spark/src/MenuItem/index.ts delete mode 100644 libs/spark/src/MenuList/MenuList.ts delete mode 100644 libs/spark/src/MenuList/index.ts delete mode 100644 libs/spark/src/NavBar/NavBar.spec.tsx delete mode 100644 libs/spark/src/NavBar/NavBar.tsx delete mode 100644 libs/spark/src/NavBar/index.ts delete mode 100644 libs/spark/src/NavBarButton/NavBarButton.tsx delete mode 100644 libs/spark/src/NavBarButton/index.ts delete mode 100644 libs/spark/src/Pagination/Pagination.ts delete mode 100644 libs/spark/src/Pagination/defaults.ts delete mode 100644 libs/spark/src/Pagination/index.ts delete mode 100644 libs/spark/src/PaginationItem/PaginationItem.ts delete mode 100644 libs/spark/src/PaginationItem/defaults.ts delete mode 100644 libs/spark/src/PaginationItem/index.ts delete mode 100644 libs/spark/src/Paper/Paper.ts delete mode 100644 libs/spark/src/Paper/index.ts delete mode 100644 libs/spark/src/Radio/Radio.spec.tsx delete mode 100644 libs/spark/src/Radio/Radio.tsx delete mode 100644 libs/spark/src/Radio/RadioIcon.tsx delete mode 100644 libs/spark/src/Radio/defaults.tsx delete mode 100644 libs/spark/src/Radio/index.ts delete mode 100644 libs/spark/src/RadioGroup/RadioGroup.ts delete mode 100644 libs/spark/src/RadioGroup/index.ts delete mode 100644 libs/spark/src/ScopedCssBaseline/ScopedCssBaseline.ts delete mode 100644 libs/spark/src/ScopedCssBaseline/index.ts delete mode 100644 libs/spark/src/SectionMessage/SectionMessage.tsx delete mode 100644 libs/spark/src/SectionMessage/index.ts delete mode 100644 libs/spark/src/SectionMessageTitle/SectionMessageTitle.ts delete mode 100644 libs/spark/src/SectionMessageTitle/index.ts delete mode 100644 libs/spark/src/Select/Select.ts delete mode 100644 libs/spark/src/Select/defaults.tsx delete mode 100644 libs/spark/src/Select/index.ts delete mode 100644 libs/spark/src/SideBarContext_unstable/index.ts delete mode 100644 libs/spark/src/SideBarDrawer_unstable/index.ts delete mode 100644 libs/spark/src/SideBarListItem_unstable/index.ts delete mode 100644 libs/spark/src/SideBarListSubheader_unstable/index.ts delete mode 100644 libs/spark/src/SideBarList_unstable/index.ts delete mode 100644 libs/spark/src/SideBarProvider_unstable/index.ts delete mode 100644 libs/spark/src/Skeleton/Skeleton.ts delete mode 100644 libs/spark/src/Skeleton/index.ts delete mode 100644 libs/spark/src/SparkThemeProvider/SparkThemeProvider.tsx delete mode 100644 libs/spark/src/SparkThemeProvider/index.ts delete mode 100644 libs/spark/src/Step/Step.spec.tsx delete mode 100644 libs/spark/src/Step/Step.tsx delete mode 100644 libs/spark/src/Step/index.ts delete mode 100644 libs/spark/src/StepButton/StepButton.spec.tsx delete mode 100644 libs/spark/src/StepButton/StepButton.tsx delete mode 100644 libs/spark/src/StepButton/index.ts delete mode 100644 libs/spark/src/StepConnector/StepConnector.spec.tsx delete mode 100644 libs/spark/src/StepConnector/StepConnector.tsx delete mode 100644 libs/spark/src/StepConnector/index.ts delete mode 100644 libs/spark/src/StepContent/StepContent.spec.tsx delete mode 100644 libs/spark/src/StepContent/StepContent.tsx delete mode 100644 libs/spark/src/StepContent/index.ts delete mode 100644 libs/spark/src/StepIcon/StepIcon.spec.tsx delete mode 100644 libs/spark/src/StepIcon/StepIcon.tsx delete mode 100644 libs/spark/src/StepIcon/index.ts delete mode 100644 libs/spark/src/StepLabel/StepLabel.spec.tsx delete mode 100644 libs/spark/src/StepLabel/StepLabel.tsx delete mode 100644 libs/spark/src/StepLabel/index.ts delete mode 100644 libs/spark/src/Stepper/Stepper.spec.tsx delete mode 100644 libs/spark/src/Stepper/Stepper.tsx delete mode 100644 libs/spark/src/Stepper/index.ts delete mode 100644 libs/spark/src/SvgIcon/SvgIcon.tsx delete mode 100644 libs/spark/src/SvgIcon/index.ts delete mode 100644 libs/spark/src/Switch/Switch.tsx delete mode 100644 libs/spark/src/Switch/defaults.ts delete mode 100644 libs/spark/src/Switch/index.ts delete mode 100644 libs/spark/src/Tab/Tab.ts delete mode 100644 libs/spark/src/Tab/defaults.ts delete mode 100644 libs/spark/src/Tab/index.ts delete mode 100644 libs/spark/src/TabContext/TabContext.ts delete mode 100644 libs/spark/src/TabContext/index.ts delete mode 100644 libs/spark/src/TabList/TabList.ts delete mode 100644 libs/spark/src/TabList/index.ts delete mode 100644 libs/spark/src/TabPanel/TabPanel.ts delete mode 100644 libs/spark/src/TabPanel/defaults.ts delete mode 100644 libs/spark/src/TabPanel/index.ts delete mode 100644 libs/spark/src/Tabs/Tabs.ts delete mode 100644 libs/spark/src/Tabs/defaults.ts delete mode 100644 libs/spark/src/Tabs/index.ts delete mode 100644 libs/spark/src/Tag/Tag.tsx delete mode 100644 libs/spark/src/Tag/index.ts delete mode 100644 libs/spark/src/TextField/TextField.ts delete mode 100644 libs/spark/src/TextField/index.ts delete mode 100644 libs/spark/src/ThemeProvider/ThemeProvider.ts delete mode 100644 libs/spark/src/ThemeProvider/index.ts delete mode 100644 libs/spark/src/Toolbar/Toolbar.ts delete mode 100644 libs/spark/src/Toolbar/index.ts delete mode 100644 libs/spark/src/TopBar_unstable/index.ts delete mode 100644 libs/spark/src/Typography/Typography.spec.tsx delete mode 100644 libs/spark/src/Typography/Typography.tsx delete mode 100644 libs/spark/src/Typography/index.ts delete mode 100644 libs/spark/src/Unstable_Autocomplete/index.ts delete mode 100644 libs/spark/src/Unstable_Avatar/index.ts delete mode 100644 libs/spark/src/Unstable_AvatarButton/index.ts delete mode 100644 libs/spark/src/Unstable_Banner/index.ts delete mode 100644 libs/spark/src/Unstable_Button/index.ts delete mode 100644 libs/spark/src/Unstable_Card/index.ts delete mode 100644 libs/spark/src/Unstable_Checkbox/index.ts delete mode 100644 libs/spark/src/Unstable_CheckboxField/index.ts delete mode 100644 libs/spark/src/Unstable_CheckboxGroupField/index.ts delete mode 100644 libs/spark/src/Unstable_CheckboxListItem/index.ts delete mode 100644 libs/spark/src/Unstable_CheckboxMenuItem/index.ts delete mode 100644 libs/spark/src/Unstable_ContentGroup/index.ts delete mode 100644 libs/spark/src/Unstable_CssBaseline/index.ts delete mode 100644 libs/spark/src/Unstable_Divider/index.ts delete mode 100644 libs/spark/src/Unstable_Dropdown/index.ts delete mode 100644 libs/spark/src/Unstable_DropdownContext/index.ts delete mode 100644 libs/spark/src/Unstable_DropdownMenu/index.ts delete mode 100644 libs/spark/src/Unstable_DropdownTrigger/index.ts delete mode 100644 libs/spark/src/Unstable_FontFacesBaseline/index.ts delete mode 100644 libs/spark/src/Unstable_FormControl/index.ts delete mode 100644 libs/spark/src/Unstable_FormControlExtraContext/index.ts delete mode 100644 libs/spark/src/Unstable_FormControlLabel/index.ts delete mode 100644 libs/spark/src/Unstable_FormGroup/index.ts delete mode 100644 libs/spark/src/Unstable_FormHelperText/index.ts delete mode 100644 libs/spark/src/Unstable_FormLabel/index.ts delete mode 100644 libs/spark/src/Unstable_IconButton/index.ts delete mode 100644 libs/spark/src/Unstable_Input/index.ts delete mode 100644 libs/spark/src/Unstable_InputAdornment/index.ts delete mode 100644 libs/spark/src/Unstable_Link/index.ts delete mode 100644 libs/spark/src/Unstable_List/index.ts delete mode 100644 libs/spark/src/Unstable_ListItem/index.ts delete mode 100644 libs/spark/src/Unstable_ListSubheader/index.ts delete mode 100644 libs/spark/src/Unstable_Menu/index.ts delete mode 100644 libs/spark/src/Unstable_MenuItem/index.ts delete mode 100644 libs/spark/src/Unstable_MenuList/index.ts delete mode 100644 libs/spark/src/Unstable_Modal/index.ts delete mode 100644 libs/spark/src/Unstable_ModalDialog/index.ts delete mode 100644 libs/spark/src/Unstable_ModalDialogActions/index.ts delete mode 100644 libs/spark/src/Unstable_ModalDialogContent/index.ts delete mode 100644 libs/spark/src/Unstable_ModalDialogContentText/index.ts delete mode 100644 libs/spark/src/Unstable_ModalDialogTitle/index.ts delete mode 100644 libs/spark/src/Unstable_Paper/index.ts delete mode 100644 libs/spark/src/Unstable_Radio/index.ts delete mode 100644 libs/spark/src/Unstable_RadioField/index.ts delete mode 100644 libs/spark/src/Unstable_RadioGroup/index.ts delete mode 100644 libs/spark/src/Unstable_RadioGroupExtraContext/index.ts delete mode 100644 libs/spark/src/Unstable_RadioGroupField/index.ts delete mode 100644 libs/spark/src/Unstable_SectionMessage/index.ts delete mode 100644 libs/spark/src/Unstable_Select/index.ts delete mode 100644 libs/spark/src/Unstable_SvgIcon/index.ts delete mode 100644 libs/spark/src/Unstable_Switch/index.ts delete mode 100644 libs/spark/src/Unstable_SwitchField/index.ts delete mode 100644 libs/spark/src/Unstable_Tab/index.ts delete mode 100644 libs/spark/src/Unstable_TabPanel/index.ts delete mode 100644 libs/spark/src/Unstable_Tabs/index.ts delete mode 100644 libs/spark/src/Unstable_TabsContext/index.ts delete mode 100644 libs/spark/src/Unstable_TabsList/index.ts delete mode 100644 libs/spark/src/Unstable_Tag/index.ts delete mode 100644 libs/spark/src/Unstable_TextField/index.ts delete mode 100644 libs/spark/src/Unstable_Toast/index.ts delete mode 100644 libs/spark/src/Unstable_ToastsContext/index.ts delete mode 100644 libs/spark/src/Unstable_ToastsProvider/index.ts delete mode 100644 libs/spark/src/Unstable_Tooltip/index.ts delete mode 100644 libs/spark/src/Unstable_Typography/index.ts delete mode 100644 libs/spark/src/alpha/Autocomplete/Autocomplete.stories.tsx delete mode 100644 libs/spark/src/alpha/Autocomplete/Autocomplete.test.tsx delete mode 100644 libs/spark/src/alpha/Autocomplete/Autocomplete.tsx delete mode 100644 libs/spark/src/alpha/Autocomplete/index.ts delete mode 100644 libs/spark/src/alpha/Avatar/Avatar.stories.tsx delete mode 100644 libs/spark/src/alpha/Avatar/Avatar.test.tsx delete mode 100644 libs/spark/src/alpha/Avatar/Avatar.tsx delete mode 100644 libs/spark/src/alpha/Avatar/index.ts delete mode 100644 libs/spark/src/alpha/AvatarButton/AvatarButton.stories.tsx delete mode 100644 libs/spark/src/alpha/AvatarButton/AvatarButton.test.tsx delete mode 100644 libs/spark/src/alpha/AvatarButton/AvatarButton.tsx delete mode 100644 libs/spark/src/alpha/AvatarButton/index.ts delete mode 100644 libs/spark/src/alpha/Banner/Banner.stories.tsx delete mode 100644 libs/spark/src/alpha/Banner/Banner.test.tsx delete mode 100644 libs/spark/src/alpha/Banner/Banner.tsx delete mode 100644 libs/spark/src/alpha/Banner/index.ts delete mode 100644 libs/spark/src/alpha/Breadcrumb/Breadcrumb.stories.tsx delete mode 100644 libs/spark/src/alpha/Breadcrumb/Breadcrumb.test.tsx delete mode 100644 libs/spark/src/alpha/Breadcrumb/Breadcrumb.tsx delete mode 100644 libs/spark/src/alpha/Breadcrumb/index.ts delete mode 100644 libs/spark/src/alpha/Breadcrumbs/Breadcrumbs.stories.tsx delete mode 100644 libs/spark/src/alpha/Breadcrumbs/Breadcrumbs.test.tsx delete mode 100644 libs/spark/src/alpha/Breadcrumbs/Breadcrumbs.tsx delete mode 100644 libs/spark/src/alpha/Breadcrumbs/index.ts delete mode 100644 libs/spark/src/alpha/Button/Button.stories.tsx delete mode 100644 libs/spark/src/alpha/Button/Button.test.tsx delete mode 100644 libs/spark/src/alpha/Button/Button.tsx delete mode 100644 libs/spark/src/alpha/Button/index.ts delete mode 100644 libs/spark/src/alpha/Card/Card.stories.tsx delete mode 100644 libs/spark/src/alpha/Card/Card.test.tsx delete mode 100644 libs/spark/src/alpha/Card/Card.tsx delete mode 100644 libs/spark/src/alpha/Card/index.ts delete mode 100644 libs/spark/src/alpha/Checkbox/Checkbox.stories.tsx delete mode 100644 libs/spark/src/alpha/Checkbox/Checkbox.test.tsx delete mode 100644 libs/spark/src/alpha/Checkbox/Checkbox.tsx delete mode 100644 libs/spark/src/alpha/Checkbox/CheckboxIcon.tsx delete mode 100644 libs/spark/src/alpha/Checkbox/index.ts delete mode 100644 libs/spark/src/alpha/CheckboxField/CheckboxField.stories.tsx delete mode 100644 libs/spark/src/alpha/CheckboxField/CheckboxField.test.tsx delete mode 100644 libs/spark/src/alpha/CheckboxField/CheckboxField.tsx delete mode 100644 libs/spark/src/alpha/CheckboxField/index.ts delete mode 100644 libs/spark/src/alpha/CheckboxGroupField/CheckboxGroupField.stories.tsx delete mode 100644 libs/spark/src/alpha/CheckboxGroupField/CheckboxGroupField.test.tsx delete mode 100644 libs/spark/src/alpha/CheckboxGroupField/CheckboxGroupField.tsx delete mode 100644 libs/spark/src/alpha/CheckboxGroupField/index.ts delete mode 100644 libs/spark/src/alpha/CheckboxListItem/CheckboxListItem.stories.tsx delete mode 100644 libs/spark/src/alpha/CheckboxListItem/CheckboxListItem.test.tsx delete mode 100644 libs/spark/src/alpha/CheckboxListItem/CheckboxListItem.tsx delete mode 100644 libs/spark/src/alpha/CheckboxListItem/index.ts delete mode 100644 libs/spark/src/alpha/CheckboxMenuItem/CheckboxMenuItem.stories.tsx delete mode 100644 libs/spark/src/alpha/CheckboxMenuItem/CheckboxMenuItem.test.tsx delete mode 100644 libs/spark/src/alpha/CheckboxMenuItem/CheckboxMenuItem.tsx delete mode 100644 libs/spark/src/alpha/CheckboxMenuItem/index.ts delete mode 100644 libs/spark/src/alpha/CircularProgress/CircularProgress.stories.tsx delete mode 100644 libs/spark/src/alpha/CircularProgress/CircularProgress.test.tsx delete mode 100644 libs/spark/src/alpha/CircularProgress/CircularProgress.tsx delete mode 100644 libs/spark/src/alpha/CircularProgress/index.ts delete mode 100644 libs/spark/src/alpha/ContentGroup/ContentGroup.stories.tsx delete mode 100644 libs/spark/src/alpha/ContentGroup/ContentGroup.test.tsx delete mode 100644 libs/spark/src/alpha/ContentGroup/ContentGroup.tsx delete mode 100644 libs/spark/src/alpha/ContentGroup/index.ts delete mode 100644 libs/spark/src/alpha/CssBaseline/CssBaseline.test.tsx delete mode 100644 libs/spark/src/alpha/CssBaseline/CssBaseline.ts delete mode 100644 libs/spark/src/alpha/CssBaseline/index.ts delete mode 100644 libs/spark/src/alpha/Divider/Divider.stories.tsx delete mode 100644 libs/spark/src/alpha/Divider/Divider.test.tsx delete mode 100644 libs/spark/src/alpha/Divider/Divider.tsx delete mode 100644 libs/spark/src/alpha/Divider/index.ts delete mode 100644 libs/spark/src/alpha/Drawer/Drawer.spec.tsx delete mode 100644 libs/spark/src/alpha/Drawer/Drawer.tsx delete mode 100644 libs/spark/src/alpha/Drawer/index.ts delete mode 100644 libs/spark/src/alpha/Dropdown/Dropdown.spec.tsx delete mode 100644 libs/spark/src/alpha/Dropdown/Dropdown.stories.tsx delete mode 100644 libs/spark/src/alpha/Dropdown/Dropdown.tsx delete mode 100644 libs/spark/src/alpha/Dropdown/index.ts delete mode 100644 libs/spark/src/alpha/DropdownContext/DropdownContext.ts delete mode 100644 libs/spark/src/alpha/DropdownContext/index.ts delete mode 100644 libs/spark/src/alpha/DropdownMenu/DropdownMenu.test.tsx delete mode 100644 libs/spark/src/alpha/DropdownMenu/DropdownMenu.tsx delete mode 100644 libs/spark/src/alpha/DropdownMenu/index.ts delete mode 100644 libs/spark/src/alpha/DropdownTrigger/DropdownTrigger.test.tsx delete mode 100644 libs/spark/src/alpha/DropdownTrigger/DropdownTrigger.tsx delete mode 100644 libs/spark/src/alpha/DropdownTrigger/index.ts delete mode 100644 libs/spark/src/alpha/FontFacesBaseline/FontFacesBaseline.test.tsx delete mode 100644 libs/spark/src/alpha/FontFacesBaseline/FontFacesBaseline.ts delete mode 100644 libs/spark/src/alpha/FontFacesBaseline/index.ts delete mode 100644 libs/spark/src/alpha/FormControl/FormControl.stories.tsx delete mode 100644 libs/spark/src/alpha/FormControl/FormControl.test.tsx delete mode 100644 libs/spark/src/alpha/FormControl/FormControl.tsx delete mode 100644 libs/spark/src/alpha/FormControl/formControlState.ts delete mode 100644 libs/spark/src/alpha/FormControl/index.ts delete mode 100644 libs/spark/src/alpha/FormControlExtraContext/FormControlExtraContext.ts delete mode 100644 libs/spark/src/alpha/FormControlExtraContext/index.ts delete mode 100644 libs/spark/src/alpha/FormControlLabel/FormControlLabel.stories.tsx delete mode 100644 libs/spark/src/alpha/FormControlLabel/FormControlLabel.test.tsx delete mode 100644 libs/spark/src/alpha/FormControlLabel/FormControlLabel.tsx delete mode 100644 libs/spark/src/alpha/FormControlLabel/index.ts delete mode 100644 libs/spark/src/alpha/FormGroup/FormGroup.stories.tsx delete mode 100644 libs/spark/src/alpha/FormGroup/FormGroup.test.tsx delete mode 100644 libs/spark/src/alpha/FormGroup/FormGroup.tsx delete mode 100644 libs/spark/src/alpha/FormGroup/index.ts delete mode 100644 libs/spark/src/alpha/FormHelperText/FormHelperText.stories.tsx delete mode 100644 libs/spark/src/alpha/FormHelperText/FormHelperText.test.tsx delete mode 100644 libs/spark/src/alpha/FormHelperText/FormHelperText.tsx delete mode 100644 libs/spark/src/alpha/FormHelperText/index.ts delete mode 100644 libs/spark/src/alpha/FormLabel/FormLabel.stories.tsx delete mode 100644 libs/spark/src/alpha/FormLabel/FormLabel.test.tsx delete mode 100644 libs/spark/src/alpha/FormLabel/FormLabel.tsx delete mode 100644 libs/spark/src/alpha/FormLabel/index.ts delete mode 100644 libs/spark/src/alpha/IconButton/IconButton.stories.tsx delete mode 100644 libs/spark/src/alpha/IconButton/IconButton.test.tsx delete mode 100644 libs/spark/src/alpha/IconButton/IconButton.tsx delete mode 100644 libs/spark/src/alpha/IconButton/index.ts delete mode 100644 libs/spark/src/alpha/Input/Input.stories.tsx delete mode 100644 libs/spark/src/alpha/Input/Input.test.tsx delete mode 100644 libs/spark/src/alpha/Input/Input.tsx delete mode 100644 libs/spark/src/alpha/Input/index.ts delete mode 100644 libs/spark/src/alpha/InputAdornment/InputAdornment.stories.tsx delete mode 100644 libs/spark/src/alpha/InputAdornment/InputAdornment.test.tsx delete mode 100644 libs/spark/src/alpha/InputAdornment/InputAdornment.tsx delete mode 100644 libs/spark/src/alpha/InputAdornment/index.ts delete mode 100644 libs/spark/src/alpha/LinearProgress/LinearProgress.stories.tsx delete mode 100644 libs/spark/src/alpha/LinearProgress/LinearProgress.test.tsx delete mode 100644 libs/spark/src/alpha/LinearProgress/LinearProgress.tsx delete mode 100644 libs/spark/src/alpha/LinearProgress/index.ts delete mode 100644 libs/spark/src/alpha/Link/Link.stories.tsx delete mode 100644 libs/spark/src/alpha/Link/Link.test.tsx delete mode 100644 libs/spark/src/alpha/Link/Link.tsx delete mode 100644 libs/spark/src/alpha/Link/index.ts delete mode 100644 libs/spark/src/alpha/List/List.stories.tsx delete mode 100644 libs/spark/src/alpha/List/List.test.tsx delete mode 100644 libs/spark/src/alpha/List/List.tsx delete mode 100644 libs/spark/src/alpha/List/index.ts delete mode 100644 libs/spark/src/alpha/ListItem/ListItem.stories.tsx delete mode 100644 libs/spark/src/alpha/ListItem/ListItem.test.tsx delete mode 100644 libs/spark/src/alpha/ListItem/ListItem.tsx delete mode 100644 libs/spark/src/alpha/ListItem/index.ts delete mode 100644 libs/spark/src/alpha/ListSubheader/ListSubheader.stories.tsx delete mode 100644 libs/spark/src/alpha/ListSubheader/ListSubheader.test.tsx delete mode 100644 libs/spark/src/alpha/ListSubheader/ListSubheader.tsx delete mode 100644 libs/spark/src/alpha/ListSubheader/index.ts delete mode 100644 libs/spark/src/alpha/Menu/Menu.stories.tsx delete mode 100644 libs/spark/src/alpha/Menu/Menu.test.tsx delete mode 100644 libs/spark/src/alpha/Menu/Menu.tsx delete mode 100644 libs/spark/src/alpha/Menu/index.ts delete mode 100644 libs/spark/src/alpha/MenuItem/MenuItem.stories.tsx delete mode 100644 libs/spark/src/alpha/MenuItem/MenuItem.test.tsx delete mode 100644 libs/spark/src/alpha/MenuItem/MenuItem.tsx delete mode 100644 libs/spark/src/alpha/MenuItem/index.ts delete mode 100644 libs/spark/src/alpha/MenuList/MenuList.stories.tsx delete mode 100644 libs/spark/src/alpha/MenuList/MenuList.test.tsx delete mode 100644 libs/spark/src/alpha/MenuList/MenuList.tsx delete mode 100644 libs/spark/src/alpha/MenuList/index.ts delete mode 100644 libs/spark/src/alpha/Modal/Modal.ts delete mode 100644 libs/spark/src/alpha/Modal/index.ts delete mode 100644 libs/spark/src/alpha/ModalDialog/ModalDialog.stories.tsx delete mode 100644 libs/spark/src/alpha/ModalDialog/ModalDialog.test.tsx delete mode 100644 libs/spark/src/alpha/ModalDialog/ModalDialog.tsx delete mode 100644 libs/spark/src/alpha/ModalDialog/index.ts delete mode 100644 libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.stories.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.test.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogActions/index.ts delete mode 100644 libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.stories.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.test.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogContent/index.ts delete mode 100644 libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.stories.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.test.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogContentText/index.ts delete mode 100644 libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.stories.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.test.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.tsx delete mode 100644 libs/spark/src/alpha/ModalDialogTitle/index.ts delete mode 100644 libs/spark/src/alpha/Paper/Paper.stories.tsx delete mode 100644 libs/spark/src/alpha/Paper/Paper.test.tsx delete mode 100644 libs/spark/src/alpha/Paper/Paper.tsx delete mode 100644 libs/spark/src/alpha/Paper/index.ts delete mode 100644 libs/spark/src/alpha/Radio/Radio.stories.tsx delete mode 100644 libs/spark/src/alpha/Radio/Radio.test.tsx delete mode 100644 libs/spark/src/alpha/Radio/Radio.tsx delete mode 100644 libs/spark/src/alpha/Radio/RadioIcon.tsx delete mode 100644 libs/spark/src/alpha/Radio/index.ts delete mode 100644 libs/spark/src/alpha/RadioField/RadioField.stories.tsx delete mode 100644 libs/spark/src/alpha/RadioField/RadioField.test.tsx delete mode 100644 libs/spark/src/alpha/RadioField/RadioField.tsx delete mode 100644 libs/spark/src/alpha/RadioField/index.ts delete mode 100644 libs/spark/src/alpha/RadioGroup/RadioGroup.stories.tsx delete mode 100644 libs/spark/src/alpha/RadioGroup/RadioGroup.test.tsx delete mode 100644 libs/spark/src/alpha/RadioGroup/RadioGroup.tsx delete mode 100644 libs/spark/src/alpha/RadioGroup/index.ts delete mode 100644 libs/spark/src/alpha/RadioGroupExtraContext/RadioGroupExtraContext.ts delete mode 100644 libs/spark/src/alpha/RadioGroupExtraContext/index.ts delete mode 100644 libs/spark/src/alpha/RadioGroupField/RadioGroupField.stories.tsx delete mode 100644 libs/spark/src/alpha/RadioGroupField/RadioGroupField.test.tsx delete mode 100644 libs/spark/src/alpha/RadioGroupField/RadioGroupField.tsx delete mode 100644 libs/spark/src/alpha/RadioGroupField/index.ts delete mode 100644 libs/spark/src/alpha/SectionMessage/SectionMessage.stories.tsx delete mode 100644 libs/spark/src/alpha/SectionMessage/SectionMessage.test.tsx delete mode 100644 libs/spark/src/alpha/SectionMessage/SectionMessage.tsx delete mode 100644 libs/spark/src/alpha/SectionMessage/index.ts delete mode 100644 libs/spark/src/alpha/Select/Select.stories.tsx delete mode 100644 libs/spark/src/alpha/Select/Select.test.tsx delete mode 100644 libs/spark/src/alpha/Select/Select.tsx delete mode 100644 libs/spark/src/alpha/Select/index.ts delete mode 100644 libs/spark/src/alpha/SideBarContext/SideBarContext.ts delete mode 100644 libs/spark/src/alpha/SideBarContext/index.ts delete mode 100644 libs/spark/src/alpha/SideBarDrawer/SideBarDrawer.spec.tsx delete mode 100644 libs/spark/src/alpha/SideBarDrawer/SideBarDrawer.tsx delete mode 100644 libs/spark/src/alpha/SideBarDrawer/index.ts delete mode 100644 libs/spark/src/alpha/SideBarList/SideBarList.spec.tsx delete mode 100644 libs/spark/src/alpha/SideBarList/SideBarList.tsx delete mode 100644 libs/spark/src/alpha/SideBarList/index.ts delete mode 100644 libs/spark/src/alpha/SideBarListItem/SideBarListItem.spec.tsx delete mode 100644 libs/spark/src/alpha/SideBarListItem/SideBarListItem.tsx delete mode 100644 libs/spark/src/alpha/SideBarListItem/index.ts delete mode 100644 libs/spark/src/alpha/SideBarListSubheader/SideBarListSubheader.spec.tsx delete mode 100644 libs/spark/src/alpha/SideBarListSubheader/SideBarListSubheader.ts delete mode 100644 libs/spark/src/alpha/SideBarListSubheader/index.ts delete mode 100644 libs/spark/src/alpha/SideBarProvider/SideBarProvider.spec.tsx delete mode 100644 libs/spark/src/alpha/SideBarProvider/SideBarProvider.stories.tsx delete mode 100644 libs/spark/src/alpha/SideBarProvider/SideBarProvider.tsx delete mode 100644 libs/spark/src/alpha/SideBarProvider/index.ts delete mode 100644 libs/spark/src/alpha/Skeleton/Skeleton.ts delete mode 100644 libs/spark/src/alpha/Skeleton/index.ts delete mode 100644 libs/spark/src/alpha/SvgIcon/SvgIcon.spec.tsx delete mode 100644 libs/spark/src/alpha/SvgIcon/SvgIcon.stories.tsx delete mode 100644 libs/spark/src/alpha/SvgIcon/SvgIcon.tsx delete mode 100644 libs/spark/src/alpha/SvgIcon/index.ts delete mode 100644 libs/spark/src/alpha/Switch/Switch.stories.tsx delete mode 100644 libs/spark/src/alpha/Switch/Switch.test.tsx delete mode 100644 libs/spark/src/alpha/Switch/Switch.tsx delete mode 100644 libs/spark/src/alpha/Switch/index.ts delete mode 100644 libs/spark/src/alpha/SwitchField/SwitchField.stories.tsx delete mode 100644 libs/spark/src/alpha/SwitchField/SwitchField.test.tsx delete mode 100644 libs/spark/src/alpha/SwitchField/SwitchField.tsx delete mode 100644 libs/spark/src/alpha/SwitchField/index.ts delete mode 100644 libs/spark/src/alpha/Tab/Tab.stories.tsx delete mode 100644 libs/spark/src/alpha/Tab/Tab.test.tsx delete mode 100644 libs/spark/src/alpha/Tab/Tab.tsx delete mode 100644 libs/spark/src/alpha/Tab/index.ts delete mode 100644 libs/spark/src/alpha/TabPanel/TabPanel.stories.tsx delete mode 100644 libs/spark/src/alpha/TabPanel/TabPanel.test.tsx delete mode 100644 libs/spark/src/alpha/TabPanel/TabPanel.tsx delete mode 100644 libs/spark/src/alpha/TabPanel/index.ts delete mode 100644 libs/spark/src/alpha/Tabs/Tabs.stories.tsx delete mode 100644 libs/spark/src/alpha/Tabs/Tabs.test.tsx delete mode 100644 libs/spark/src/alpha/Tabs/Tabs.tsx delete mode 100644 libs/spark/src/alpha/Tabs/index.ts delete mode 100644 libs/spark/src/alpha/TabsContext/TabsContext.ts delete mode 100644 libs/spark/src/alpha/TabsContext/index.ts delete mode 100644 libs/spark/src/alpha/TabsList/TabsList.stories.tsx delete mode 100644 libs/spark/src/alpha/TabsList/TabsList.test.tsx delete mode 100644 libs/spark/src/alpha/TabsList/TabsList.tsx delete mode 100644 libs/spark/src/alpha/TabsList/index.ts delete mode 100644 libs/spark/src/alpha/Tag/Tag.stories.tsx delete mode 100644 libs/spark/src/alpha/Tag/Tag.test.tsx delete mode 100644 libs/spark/src/alpha/Tag/Tag.tsx delete mode 100644 libs/spark/src/alpha/Tag/index.ts delete mode 100644 libs/spark/src/alpha/TextField/TextField.stories.tsx delete mode 100644 libs/spark/src/alpha/TextField/TextField.test.tsx delete mode 100644 libs/spark/src/alpha/TextField/TextField.tsx delete mode 100644 libs/spark/src/alpha/TextField/index.ts delete mode 100644 libs/spark/src/alpha/Toast/Toast.stories.tsx delete mode 100644 libs/spark/src/alpha/Toast/Toast.test.tsx delete mode 100644 libs/spark/src/alpha/Toast/Toast.tsx delete mode 100644 libs/spark/src/alpha/Toast/index.ts delete mode 100644 libs/spark/src/alpha/ToastsContext/ToastsContext.d.ts delete mode 100644 libs/spark/src/alpha/ToastsContext/index.ts delete mode 100644 libs/spark/src/alpha/ToastsProvider/ToastsProvider.stories.tsx delete mode 100644 libs/spark/src/alpha/ToastsProvider/ToastsProvider.test.tsx delete mode 100644 libs/spark/src/alpha/ToastsProvider/ToastsProvider.tsx delete mode 100644 libs/spark/src/alpha/ToastsProvider/index.ts delete mode 100644 libs/spark/src/alpha/Tooltip/Tooltip.stories.tsx delete mode 100644 libs/spark/src/alpha/Tooltip/Tooltip.test.tsx delete mode 100644 libs/spark/src/alpha/Tooltip/Tooltip.tsx delete mode 100644 libs/spark/src/alpha/Tooltip/index.ts delete mode 100644 libs/spark/src/alpha/TopBar/TopBar.spec.tsx delete mode 100644 libs/spark/src/alpha/TopBar/TopBar.stories.tsx delete mode 100644 libs/spark/src/alpha/TopBar/TopBar.tsx delete mode 100644 libs/spark/src/alpha/TopBar/index.ts delete mode 100644 libs/spark/src/alpha/Typography/Typography.spec.tsx delete mode 100644 libs/spark/src/alpha/Typography/Typography.stories.tsx delete mode 100644 libs/spark/src/alpha/Typography/Typography.tsx delete mode 100644 libs/spark/src/alpha/Typography/index.ts delete mode 100644 libs/spark/src/alpha/createSvgIcon/createSvgIcon.test.tsx delete mode 100644 libs/spark/src/alpha/createSvgIcon/createSvgIcon.tsx delete mode 100644 libs/spark/src/alpha/createSvgIcon/index.ts delete mode 100644 libs/spark/src/alpha/index.ts delete mode 100644 libs/spark/src/alpha/internal/Alert.tsx delete mode 100644 libs/spark/src/alpha/internal/AlertOctagon.tsx delete mode 100644 libs/spark/src/alpha/internal/AlertTriangle.tsx delete mode 100644 libs/spark/src/alpha/internal/CheckCircle2.tsx delete mode 100644 libs/spark/src/alpha/internal/ChevronDown.tsx delete mode 100644 libs/spark/src/alpha/internal/Cross.tsx delete mode 100644 libs/spark/src/alpha/internal/CrossSmall.tsx delete mode 100644 libs/spark/src/alpha/internal/Filter.tsx delete mode 100644 libs/spark/src/alpha/internal/Info.tsx delete mode 100644 libs/spark/src/alpha/theme/borders.stories.tsx delete mode 100644 libs/spark/src/alpha/theme/borders.ts delete mode 100644 libs/spark/src/alpha/theme/fontFaces.stories.tsx delete mode 100644 libs/spark/src/alpha/theme/fontFaces.ts delete mode 100644 libs/spark/src/alpha/theme/palette.stories.tsx delete mode 100644 libs/spark/src/alpha/theme/palette.ts delete mode 100644 libs/spark/src/alpha/theme/radii.stories.tsx delete mode 100644 libs/spark/src/alpha/theme/radii.ts delete mode 100644 libs/spark/src/alpha/theme/shadows.stories.tsx delete mode 100644 libs/spark/src/alpha/theme/shadows.ts delete mode 100644 libs/spark/src/alpha/theme/typography.stories.tsx delete mode 100644 libs/spark/src/alpha/theme/typography.ts delete mode 100644 libs/spark/src/alpha/useAutocomplete/index.ts delete mode 100644 libs/spark/src/alpha/useAutocomplete/useAutocomplete.ts delete mode 100644 libs/spark/src/alpha/useAutocomplete/useAutocomplete_mui.ts delete mode 100644 libs/spark/src/alpha/useDropdown/index.ts delete mode 100644 libs/spark/src/alpha/useDropdown/useDropdown.ts delete mode 100644 libs/spark/src/alpha/useFormControl/index.ts delete mode 100644 libs/spark/src/alpha/useFormControl/useFormControl.ts delete mode 100644 libs/spark/src/alpha/useFormControlExtra/index.ts delete mode 100644 libs/spark/src/alpha/useFormControlExtra/useFormControlExtra.ts delete mode 100644 libs/spark/src/alpha/useMediaQuery/index.ts delete mode 100644 libs/spark/src/alpha/useMediaQuery/useMediaQuery.test.ts delete mode 100644 libs/spark/src/alpha/useMediaQuery/useMediaQuery.ts delete mode 100644 libs/spark/src/alpha/useRadioGroupExtra/index.ts delete mode 100644 libs/spark/src/alpha/useRadioGroupExtra/useRadioGroupExtra.ts delete mode 100644 libs/spark/src/alpha/useSideBar/index.ts delete mode 100644 libs/spark/src/alpha/useSideBar/useSideBar.ts delete mode 100644 libs/spark/src/alpha/useSideBarTrigger/index.ts delete mode 100644 libs/spark/src/alpha/useSideBarTrigger/useSideBarTrigger.ts delete mode 100644 libs/spark/src/alpha/useTabs/index.ts delete mode 100644 libs/spark/src/alpha/useTabs/useTabs.ts delete mode 100644 libs/spark/src/alpha/useTheme/index.ts delete mode 100644 libs/spark/src/alpha/useTheme/useTheme.test.ts delete mode 100644 libs/spark/src/alpha/useTheme/useTheme.ts delete mode 100644 libs/spark/src/alpha/useToasts/index.ts delete mode 100644 libs/spark/src/alpha/useToasts/useToasts.ts delete mode 100644 libs/spark/src/createSvgIcon_unstable/index.ts delete mode 100644 libs/spark/src/index.ts delete mode 100644 libs/spark/src/internal/AlertOctagonFilled.tsx delete mode 100644 libs/spark/src/internal/AlertThick.tsx delete mode 100644 libs/spark/src/internal/AlertTriangleFilled.tsx delete mode 100644 libs/spark/src/internal/ArrowRight.tsx delete mode 100644 libs/spark/src/internal/CheckCircleFilled.tsx delete mode 100644 libs/spark/src/internal/CheckThick.tsx delete mode 100644 libs/spark/src/internal/ChevronDown.tsx delete mode 100644 libs/spark/src/internal/ChevronRight.tsx delete mode 100644 libs/spark/src/internal/Cross.tsx delete mode 100644 libs/spark/src/internal/CrossSmall.tsx delete mode 100644 libs/spark/src/internal/InfoFilled.tsx delete mode 100644 libs/spark/src/internal/index.ts delete mode 100644 libs/spark/src/makeStyles/index.ts delete mode 100644 libs/spark/src/makeStyles/makeStyles.spec.tsx delete mode 100644 libs/spark/src/makeStyles/makeStyles.ts delete mode 100644 libs/spark/src/styled/index.ts delete mode 100644 libs/spark/src/styled/styled.spec.tsx delete mode 100644 libs/spark/src/styled/styled.ts delete mode 100644 libs/spark/src/theme/fontFaces.ts delete mode 100644 libs/spark/src/theme/index.ts delete mode 100644 libs/spark/src/theme/initialTheme.ts delete mode 100644 libs/spark/src/theme/overrides.ts delete mode 100644 libs/spark/src/theme/palette.ts delete mode 100644 libs/spark/src/theme/props.ts delete mode 100644 libs/spark/src/theme/shadows.ts delete mode 100644 libs/spark/src/theme/theme.ts delete mode 100644 libs/spark/src/theme/themeAugmentation.ts delete mode 100644 libs/spark/src/theme/typography.ts delete mode 100644 libs/spark/src/unstable_createSvgIcon.tsx delete mode 100644 libs/spark/src/useAutocomplete_unstable/index.ts delete mode 100644 libs/spark/src/useDropdown_unstable/index.ts delete mode 100644 libs/spark/src/useFormControl/index.ts delete mode 100644 libs/spark/src/useFormControl/useFormControl.ts delete mode 100644 libs/spark/src/useFormControlExtra_unstable/index.ts delete mode 100644 libs/spark/src/useFormControl_unstable/index.ts delete mode 100644 libs/spark/src/useMediaQuery/index.ts delete mode 100644 libs/spark/src/useMediaQuery/useMediaQuery.ts delete mode 100644 libs/spark/src/useMediaQuery_unstable/index.ts delete mode 100644 libs/spark/src/useRadioGroupExtra_unstable/index.ts delete mode 100644 libs/spark/src/useSideBarTrigger_unstable/index.ts delete mode 100644 libs/spark/src/useSideBar_unstable/index.ts delete mode 100644 libs/spark/src/useTabs_unstable/index.ts delete mode 100644 libs/spark/src/useTheme/index.ts delete mode 100644 libs/spark/src/useTheme/useTheme.ts delete mode 100644 libs/spark/src/useTheme_unstable/index.ts delete mode 100644 libs/spark/src/useToasts_unstable/index.ts delete mode 100644 libs/spark/src/utils/ClassNameMap.ts delete mode 100644 libs/spark/src/utils/OverridableComponent.ts delete mode 100644 libs/spark/src/utils/StandardProps.ts delete mode 100644 libs/spark/src/utils/capitalize.ts delete mode 100644 libs/spark/src/utils/createSvgIcon.tsx delete mode 100644 libs/spark/src/utils/index.ts delete mode 100644 libs/spark/src/utils/useClassesCapture.ts delete mode 100644 libs/spark/src/utils/useControlled.ts delete mode 100644 libs/spark/src/utils/useId.ts delete mode 100644 libs/spark/src/utils/useMergeClasses.ts delete mode 100644 libs/spark/src/utils/useUniqueId.ts delete mode 100644 libs/spark/src/withStyles/index.ts delete mode 100644 libs/spark/src/withStyles/withStyles.spec.tsx delete mode 100644 libs/spark/src/withStyles/withStyles.ts delete mode 100644 libs/spark/tsconfig.build.json delete mode 100644 libs/spark/tsconfig.json delete mode 100644 libs/spark/tsconfig.lib.json delete mode 100644 libs/spark/tsconfig.spec.json diff --git a/.github/workflows/ci:main.yml b/.github/workflows/ci:main.yml index 811904d67..9ffbb704f 100644 --- a/.github/workflows/ci:main.yml +++ b/.github/workflows/ci:main.yml @@ -31,6 +31,3 @@ jobs: - name: Check format run: npm run format:check - - - name: Unit test project spark - run: npx nx run spark:test diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index f24596039..45add0d4b 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -21,44 +21,6 @@ jobs: - name: Clean install run: npm ci - - name: Test - run: npx nx run spark:test - - name: Get the version id: get_version run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//} - - - name: Build @prenda/spark - run: npm run build:components - - - name: Publish @prenda/spark - uses: JS-DevTools/npm-publish@v1 - with: - token: ${{ secrets.NPM_TOKEN }} - package: ./dist/libs/spark/package.json - - - name: Notify @prenda/spark publish success - if: success() - uses: rtCamp/action-slack-notify@v2 - env: - SLACK_CHANNEL: feed-design-system - SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} - SLACK_COLOR: ${{ job.status }} - SLACK_ICON: https://github.com/prenda-school/prenda-spark/raw/main/public/img/prenda-design-system-abstract-mark-logo.svg - SLACK_USERNAME: 'Action: NPM Publish' - MSG_MINIMAL: true - SLACK_TITLE: '@prenda/spark ${{ steps.get_version.outputs.VERSION }}' - SLACK_MESSAGE: Published - - - name: Notify @prenda/spark publish failure - if: failure() - uses: rtCamp/action-slack-notify@v2 - env: - SLACK_CHANNEL: feed-design-system - SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} - SLACK_COLOR: ${{ job.status }} - SLACK_ICON: https://github.com/prenda-school/prenda-spark/raw/main/public/img/prenda-design-system-abstract-mark-logo.svg - SLACK_USERNAME: 'Action: NPM Publish' - MSG_MINIMAL: true - SLACK_TITLE: '@prenda/spark ${{ steps.get_version.outputs.VERSION }}' - SLACK_MESSAGE: Failed to publish diff --git a/.prettierignore b/.prettierignore index 1afd011d3..22be1f993 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,2 @@ /coverage -/dist \ No newline at end of file +/dist diff --git a/README.md b/README.md index 4902cda5e..1465df74f 100644 --- a/README.md +++ b/README.md @@ -16,8 +16,6 @@

[![Contributors](https://img.shields.io/github/contributors/prenda-school/design-system)](https://github.com/prenda-school/design-system/graphs/contributors) -[![NPM Latest Version](https://img.shields.io/npm/v/@prenda/spark/latest)](https://www.npmjs.com/package/@prenda/spark) -[![NPM Downloads](https://img.shields.io/npm/dm/@prenda/spark)](https://www.npmjs.com/package/@prenda/spark) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow)](https://conventionalcommits.org) [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079)](https://semver.org/) [![Figma](https://img.shields.io/badge/-designed%20in%20Figma-f24e1e?logo=figma&logoColor=white)](https://www.figma.com/files/917908403520495571/project/20230042/Design-System?fuid=918218354701455034) @@ -30,26 +28,12 @@ Implementations are available as installable NPM packages: -- [@prenda/spark](https://www.npmjs.com/package/@prenda/spark) - ## Usage Here is an example to get you started. ```tsx -import React from 'react'; -import ReactDOM from 'react-dom'; -import { SparkThemeProvider, Button } from '@prenda/spark'; - -function App() { - return ( - - - - ); -} - -ReactDOM.render(, document.querySelector('#app')); + ``` ## Documentation @@ -64,8 +48,6 @@ Read the [contributing guide](/CONTRIBUTING.md) to learn about our development p Read the changelog of each library to address breaking changes and learn about new features and fixes. -- [`@prenda/spark/CHANGELOG`](libs/spark/CHANGELOG.md) - ## No license Copyright (C) 2021 Prenda, Inc. -- All Rights Reserved diff --git a/libs/spark/.babelrc b/libs/spark/.babelrc deleted file mode 100644 index c6d897d3b..000000000 --- a/libs/spark/.babelrc +++ /dev/null @@ -1,11 +0,0 @@ -{ - "presets": [ - [ - "@nrwl/react/babel", - { - "runtime": "automatic", - "useBuiltIns": "usage" - } - ] - ] -} diff --git a/libs/spark/.eslintrc.json b/libs/spark/.eslintrc.json deleted file mode 100644 index af878aeb1..000000000 --- a/libs/spark/.eslintrc.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": { - "react/jsx-pascal-case": "off", - "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": ["error"] - } - }, - { - "files": ["*.ts", "*.tsx"], - "excludedFiles": ["*.stories.*"], - "parserOptions": { - "project": ["libs/spark/tsconfig.*?.json"] - }, - "rules": { - "@typescript-eslint/consistent-type-imports": "error", - "@typescript-eslint/consistent-type-exports": "error" - } - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["*.stories.*"], - "rules": {} - } - ] -} diff --git a/libs/spark/CHANGELOG.md b/libs/spark/CHANGELOG.md deleted file mode 100644 index 6118cdabf..000000000 --- a/libs/spark/CHANGELOG.md +++ /dev/null @@ -1,2576 +0,0 @@ -# Changelog - -## [vNext](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.18...vNext) (YYYY-MM-DD) - -No changes. - -## [v2.0.0-alpha.18](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.17...v2.0.0-alpha.18) (2022-04-18) - -- [fix] type re-exports present in "esm" build distribution - -API surface: - -- **Breadcrumbs** - - [DEPRECATED] use **alpha/Breadcrumbs** -- **alpha/Breadcrumb** - - [feat] initial implementation -- **alpha/Breadcrumbs** - - [feat] initial implementation - -## [v2.0.0-alpha.17](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.16...v2.0.0-alpha.17) (2023-04-13) - -The naming scheme of v2 replacement components will change (again) to just the component name. However, in addition, the location of these components is now under the "/alpha" directory. Previous exports are maintained, but deprecated, in order to give consumers the chance to migrate over time, rather than all at once. - -```diff --import { Unstable_Button } from '@prenda/spark' -+import { Button } from '@prenda/spark/alpha' -``` - -The v2 theme properties have also been migrated to "alpha" naming. Previous properties are maintained but deprecated. - -```diff -import { theme } from '@prenda/spark' --theme.unstable_palette.neutral[100] -+theme.palette_alpha.netural[100] -``` - -Lastly, all v1 stable components with a v2 alpha replacement have been marked as deprecated. - -- **alpha/Autocomplete** - - [feat] added -- **alpha/Avatar** - - [feat] added -- **alpha/AvatarButton** - - [feat] added -- **alpha/Banner** - - [feat] added -- **alpha/Button** - - [feat] added -- **alpha/Card** - - [feat] added -- **alpha/Checkbox** - - [feat] added -- **alpha/CheckboxField** - - [feat] added -- **alpha/CheckboxGroupField** - - [feat] added -- **alpha/CheckboxListItem** - - [feat] added -- **alpha/CheckboxMenuItem** - - [feat] added -- **alpha/CircularProgress** - - [feat] added -- **alpha/ContentGroup** - - [feat] added - - [fix] not handling given `className` -- **alpha/createSvgIcon** - - [feat] added -- **alpha/CssBaseline** - - [feat] added -- **alpha/Divider** - - [feat] added -- **alpha/Dropdown** - - [feat] added -- **alpha/DropdownContext** - - [feat] added -- **alpha/DropdownMenu** - - [feat] added -- **alpha/DropdownTrigger** - - [feat] added -- **alpha/FontFacesBaseline** - - [feat] added -- **alpha/FormControl** - - [feat] added -- **alpha/FormControlExtraContext** - - [feat] added -- **alpha/FormControlLabel** - - [feat] added -- **alpha/FormGroup** - - [feat] added -- **alpha/FormHelperText** - - [feat] added -- **alpha/FormLabel** - - [feat] added -- **alpha/IconButton** - - [feat] added -- **alpha/Input** - - [feat] added -- **alpha/InputAdornment** - - [feat] added -- **alpha/LinearProgress** - - [feat] added -- **alpha/Link** - - [feat] added -- **alpha/List** - - [feat] added -- **alpha/ListItem** - - [feat] added -- **alpha/ListSubheader** - - [feat] added -- **alpha/Menu** - - [feat] added - - [style] unset v1 list styles -- **alpha/MenuItem** - - [feat] added -- **alpha/MenuList** - - [feat] added -- **alpha/Modal** - - [feat] added -- **alpha/ModalDialog** - - [feat] added -- **alpha/ModalDialogActions** - - [feat] added -- **alpha/ModalDialogContent** - - [feat] added -- **alpha/ModalDialogContentText** - - [feat] added -- **alpha/ModalDialogTitle** - - [feat] added -- **alpha/Paper** - - [feat] added -- **alpha/Radio** - - [feat] added -- **alpha/RadioField** - - [feat] added -- **alpha/RadioGroup** - - [feat] added -- **alpha/RadioGroupExtraContext** - - [feat] added -- **alpha/RadioGroupField** - - [feat] added -- **alpha/SectionMessage** - - [feat] added -- **alpha/Select** - - [feat] added -- **alpha/SideBarContext** - - [feat] added -- **alpha/SideBarDrawer** - - [feat] added -- **alpha/SideBarList** - - [feat] added -- **alpha/SideBarListItem** - - [feat] added - - [style] change typography, reduce padding -- **alpha/SideBarListSubheader** - - [feat] added - - [style] change typography, reduce padding -- **alpha/SideBarProvider** - - [feat] added - - [style] opening on initial render on mobile -- **alpha/Skeleton** - - [feat] added -- **alpha/SvgIcon** - - [feat] added -- **alpha/Switch** - - [feat] added -- **alpha/SwitchField** - - [feat] added -- **alpha/Tab** - - [feat] added -- **alpha/TabPanel** - - [feat] added -- **alpha/Tabs** - - [feat] added -- **alpha/TabsContext** - - [feat] added -- **alpha/TabsList** - - [feat] added -- **alpha/Tag** - - [feat] added -- **alpha/TextField** - - [feat] added -- **alpha/Toast** - - [feat] added -- **alpha/ToastsContext** - - [feat] added -- **alpha/ToastsProvider** - - [feat] added -- **alpha/Tooltip** - - [feat] added -- **alpha/TopBar** - - [feat] added -- **alpha/Typography** - - [feat] added -- **alpha/useAutocomplete** - - [feat] added -- **alpha/useDropdown** - - [feat] added -- **alpha/useFormControl** - - [feat] added -- **alpha/useFormControlExtra** - - [feat] added -- **alpha/useMediaQuery** - - [feat] added -- **alpha/useRadioGroupExtra** - - [feat] added -- **alpha/useSideBar** - - [feat] added -- **alpha/useSideBarTrigger** - - [feat] added -- **alpha/useTabs** - - [feat] added -- **alpha/useTheme** - - [feat] added -- **alpha/useToasts** - - [feat] added -- **Alert** - - [DEPRECATED] -- **AlertTitle** - - [DEPRECATED] -- **Autocomplete** - - [DEPRECATED] -- **Avatar** - - [DEPRECATED] -- **Banner** - - [DEPRECATED] -- **Button** - - [DEPRECATED] -- **Card** - - [DEPRECATED] -- **Checkbox** - - [DEPRECATED] -- **CircularProgress_unstable** - - [DEPRECATED] -- **createSvgIcon_unstable** - - [DEPRECATED] -- **CssBaseline** - - [DEPRECATED] -- **Divider** - - [DEPRECATED] -- **DropdownAnchor** - - [DEPRECATED] -- **DropdownContext** - - [DEPRECATED] -- **DropdownMenu** - - [DEPRECATED] -- **FontFacesBaseline** - - [DEPRECATED] -- **FormControl** - - [DEPRECATED] -- **FormControlLabel** - - [DEPRECATED] -- **FormGroup** - - [DEPRECATED] -- **FormHelperText** - - [DEPRECATED] -- **FormLabel** - - [DEPRECATED] -- **IconButton** - - [DEPRECATED] -- **Input** - - [DEPRECATED] -- **InputAdornment** - - [DEPRECATED] -- **InputBase** - - [DEPRECATED] -- **InputLabel** - - [DEPRECATED] -- **LinearProgress_unstable** - - [DEPRECATED] -- **Link** - - [DEPRECATED] -- **List** - - [DEPRECATED] -- **ListItem** - - [DEPRECATED] -- **ListItemAvatar** - - [DEPRECATED] -- **ListItemIcon** - - [DEPRECATED] -- **ListItemSecondaryAction** - - [DEPRECATED] -- **ListItemText** - - [DEPRECATED] -- **ListSubheader** - - [DEPRECATED] -- **Menu** - - [DEPRECATED] -- **MenuItem** - - [DEPRECATED] -- **MenuList** - - [DEPRECATED] -- **NavBar** - - [DEPRECATED] -- **Paper** - - [DEPRECATED] -- **Radio** - - [DEPRECATED] -- **RadioGroup** - - [DEPRECATED] -- **SectionMessage** - - [DEPRECATED] -- **SectionMessageTitle** - - [DEPRECATED] -- **Select** - - [DEPRECATED] -- **SideBarContext_unstable** - - [DEPRECATED] -- **SideBarDrawer_unstable** - - [DEPRECATED] -- **SideBarList_unstable** - - [DEPRECATED] -- **SideBarListItem_unstable** - - [DEPRECATED] -- **SideBarListSubheader_unstable** - - [DEPRECATED] -- **SideBarProvider_unstable** - - [DEPRECATED] -- **Skeleton** - - [DEPRECATED] -- **SparkThemeProvider** - - [DEPRECATED] -- **SvgIcon** - - [DEPRECATED] -- **Switch** - - [DEPRECATED] -- **Tab** - - [DEPRECATED] -- **TabContext** - - [DEPRECATED] -- **TabList** - - [DEPRECATED] -- **TabPanel** - - [DEPRECATED] -- **Tabs** - - [DEPRECATED] -- **Tag** - - [DEPRECATED] -- **TextField** - - [DEPRECATED] -- **Typography** - - [DEPRECATED] -- **theme** - - [DEPRECATED] `theme.unstable_borders` - - [DEPRECATED] `theme.unstable_palette` - - [DEPRECATED] `theme.unstable_radii` - - [DEPRECATED] `theme.unstable_shadows` - - [DEPRECATED] `theme.unstable_typography` - - [feat] added `theme.borders_alpha` - - [feat] added `theme.palette_alpha` - - [feat] added `theme.radii_alpha` - - [feat] added `theme.shadows_alpha` - - [feat] added `theme.typography_alpha` -- **Unstable_Autocomplete** - - [DEPRECATED] -- **Unstable_Avatar** - - [DEPRECATED] -- **Unstable_AvatarButton** - - [DEPRECATED] -- **Unstable_Banner** - - [DEPRECATED] -- **Unstable_Button** - - [DEPRECATED] -- **Unstable_Card** - - [DEPRECATED] -- **Unstable_Checkbox** - - [DEPRECATED] -- **Unstable_CheckboxField** - - [DEPRECATED] -- **Unstable_CheckboxGroupField** - - [DEPRECATED] -- **Unstable_CheckboxListItem** - - [DEPRECATED] -- **Unstable_CheckboxMenuItem** - - [DEPRECATED] -- **Unstable_ContentGroup** - - [DEPRECATED] -- **Unstable_CssBaseline** - - [DEPRECATED] -- **Unstable_Divider** - - [DEPRECATED] -- **Unstable_Dropdown** - - [DEPRECATED] -- **Unstable_DropdownContext** - - [DEPRECATED] -- **Unstable_DropdownMenu** - - [DEPRECATED] -- **Unstable_DropdownTrigger** - - [DEPRECATED] -- **Unstable_FontFacesBaseline** - - [DEPRECATED] -- **Unstable_FormControl** - - [DEPRECATED] -- **Unstable_FormControlExtraContext** - - [DEPRECATED] -- **Unstable_FormControlLabel** - - [DEPRECATED] -- **Unstable_FormGroup** - - [DEPRECATED] -- **Unstable_FormHelperText** - - [DEPRECATED] -- **Unstable_FormLabel** - - [DEPRECATED] -- **Unstable_IconButton** - - [DEPRECATED] -- **Unstable_Input** - - [DEPRECATED] -- **Unstable_InputAdornment** - - [DEPRECATED] -- **Unstable_Link** - - [DEPRECATED] -- **Unstable_List** - - [DEPRECATED] -- **Unstable_ListItem** - - [DEPRECATED] -- **Unstable_ListSubheader** - - [DEPRECATED] -- **Unstable_Menu** - - [DEPRECATED] -- **Unstable_MenuItem** - - [DEPRECATED] -- **Unstable_MenuList** - - [DEPRECATED] -- **Unstable_Modal** - - [DEPRECATED] -- **Unstable_ModalDialog** - - [DEPRECATED] -- **Unstable_ModalDialogActions** - - [DEPRECATED] -- **Unstable_ModalDialogContent** - - [DEPRECATED] -- **Unstable_ModalDialogContentText** - - [DEPRECATED] -- **Unstable_ModalDialogTitle** - - [DEPRECATED] -- **Unstable_Paper** - - [DEPRECATED] -- **Unstable_Radio** - - [DEPRECATED] -- **Unstable_RadioField** - - [DEPRECATED] -- **Unstable_RadioGroup** - - [DEPRECATED] -- **Unstable_RadioGroupExtraContext** - - [DEPRECATED] -- **Unstable_RadioGroupField** - - [DEPRECATED] -- **Unstable_SectionMessage** - - [DEPRECATED] -- **Unstable_Select** - - [DEPRECATED] -- **Unstable_Skeleton** - - [DEPRECATED] -- **Unstable_SvgIcon** - - [DEPRECATED] -- **Unstable_Switch** - - [DEPRECATED] -- **Unstable_SwitchField** - - [DEPRECATED] -- **Unstable_Tab** - - [DEPRECATED] -- **Unstable_TabPanel** - - [DEPRECATED] -- **Unstable_Tabs** - - [DEPRECATED] -- **Unstable_TabsContext** - - [DEPRECATED] -- **Unstable_TabsList** - - [DEPRECATED] -- **Unstable_Tag** - - [DEPRECATED] -- **Unstable_TextField** - - [DEPRECATED] -- **Unstable_Toast** - - [DEPRECATED] -- **Unstable_ToastsContext** - - [DEPRECATED] -- **Unstable_ToastsProvider** - - [DEPRECATED] -- **Unstable_Tooltip** - - [DEPRECATED] -- **Unstable_TopBar** - - [DEPRECATED] -- **Unstable_Typography** - - [DEPRECATED] -- **Unstable_useAutocomplete** - - [DEPRECATED] -- **useDropdown_unstable** - - [DEPRECATED] -- **useFormControl** - - [DEPRECATED] -- **useFormControl_unstable** - - [DEPRECATED] -- **useFormControlExtra_unstable** - - [DEPRECATED] -- **useMediaQuery** - - [DEPRECATED] -- **useMediaQuery_unstable** - - [DEPRECATED] -- **useRadioGroupExtra_unstable** - - [DEPRECATED] -- **useSideBar_unstable** - - [DEPRECATED] -- **useSideBarTrigger_unstable** - - [DEPRECATED] -- **useTabs_unstable** - - [DEPRECATED] -- **useTheme** - - [DEPRECATED] -- **useTheme_unstable** - - [DEPRECATED] -- **useToasts_unstable** - - [DEPRECATED] - -## [v2.0.0-alpha.16](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.15...v2.0.0-alpha.16) (2023-04-12) - -API surface: - -- **SideBarDrawer_unstable** - - [fix] missing React import - -## [v2.0.0-alpha.15](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.14...v2.0.0-alpha.15) (2023-04-11) - -API surface: - -- **CircularProgress_unstable** - - [style] add class keys `svg`, `svgBg`, `circleBg` - - [style] change default size to 48 - - [style] change default thickness to ~6.2 - - [style] add background circle - - [style] change default label styles to fit within smaller default size - - [feat] add prop `hideBgCircle` -- **Drawer_unstable** - - [feat] initial implementation -- **SideBarContext_unstable** - - [feat] initial implementation -- **SideBarDrawer_unstable** - - [feat] initial implementation -- **SideBarList_unstable** - - [feat] initial implementation -- **SideBarListItem_unstable** - - [feat] initial implementation -- **SideBarListSubheader_unstable** - - [feat] initial implementation -- **SideBarProvider_unstable** - - [feat] initial implementation -- **useSideBar_unstable** - - [feat] initial implementation -- **useSideBarTrigger_unstable** - - [feat] initial implementation - -## [v2.0.0-alpha.14](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.13...v2.0.0-alpha.14) (2023-04-10) - -The naming scheme of v2 replacement components will change from "Unstable\_\" to "\\_unstable". The intention is to ease developer emotions about the "unstable" prefix by changing it to a suffix and to increase find-ability of components. - -API surface: - -- **CircularProgress_unstable** - - [feat] initial implementation -- **LinearProgress_unstable** - - [feat] initial implementation -- **TopBar_unstable** - - [feat] initial implementation - -## [v2.0.0-alpha.13](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2023-03-21) - -API surface: - -- **createSvgIcon_unstable** - - [fix] missing top-level re-export -- **useMediaQuery_unstable** - - [fix] missing top-level re-export -- **useTheme_unstable** - - [fix] missing top-level re-export - -## [v2.0.0-alpha.12](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.11...v2.0.0-alpha.12) (2023-03-21) - -API surface: - -- **createSvgIcon_unstable** - - [feat] added -- **Unstable_Autocomplete** - - see **Unstable_Input** - - [style] simplify internal styles for better behavior with multiple value rendering - - [feat] add `multipleValueWrapper` class key -- **Unstable_Input** - - [style] keep background color constant on focus _and_ hover -- **Unstable_Select** - - see **Unstable_Input** -- **Unstable_TextField** - - see **Unstable_Input** -- **unstable_createSvgIcon** - - [DEPRECATION] deprecated - - _migration: use createSvgIcon_unstable (no api changes)_ -- **useMediaQuery_unstable** - - [feat] added - - supports default theme with "unstable" properties -- **useTheme_unstable** - - [feat] added - - supports default theme with "unstable" properties - -## [v2.0.0-alpha.11](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.10...v2.0.0-alpha.11) (2023-03-15) - -API surface: - -- **Unstable_Autocomplete** - - see **Unstable_Input** for changes affecting default value of `renderInput` - - [style] prevent width changes from default `renderMultipleValue` - - [style] change to be inline-level element - - [style] change to vertically align with inline text - - [feat] improve Form Control API-integration -- **Unstable_CheckboxGroupField** - - see **Unstable_FormControl** -- **Unstable_FormControl** - - [feat] improve Form Control API-integration - - [style] remove default width - - [BREAKING] change `id` prop to forward to the root, wrapper element (formerly forwarded to the descendant input element) - - _migration: use `inputId` prop_ - - [feat] add `inputId` prop - - [feat] add `labelId` prop - - [feat] add `helperTextId` prop - - [style] change to be block-level element -- **Unstable_Input** - - see **Unstable_InputAdornment** for changes affecting default values of `renderLeadingEl`, `renderTrailingEl` - - [feat] improve Form Control API-integration -- **Unstable_InputAdornment** - - [style] increase font size when `size="small"` -- **Unstable_Link** - - [style] change to vertically align with inline text when `component="button"` -- **Unstable_RadioGroup** - - [fix] not forwarding the `id` prop to the underlying element -- **Unstable_RadioGroupField** - - see **Unstable_FormControl**, **Unstable_RadioGroup** -- **Unstable_Select** - - see **Unstable_Input** for changes affecting default value of `input` - - [feat] improve Form Control API-integration -- **Unstable_TextField** - - see **Unstable_FormControl**, **Unstable_Input**, **Unstable_Select** - - [DEPRECATION] deprecated - - _migration: compose the Form Control pattern directly_ -- **useFormControl_unstable** - - [feat] add `filled`, `focused`, `inputId`, `labelId`, `helperTextId` to parameters - - [BREAKING] remove `id` from result - - _migration: use `inputId` parameter_ - - [feat] add `inputId` to result - -## [v2.0.0-alpha.10](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.9...v2.0.0-alpha.10) (2023-03-13) - -API surface: - -- **Unstable_Autocomplete** - - [feat] added -- **Unstable_Banner** - - [style] reduce gap, padding on mobile -- **Unstable_Button** - - [style] improve styles when `color="inverse"` -- **Unstable_Card** - - [style] reduce padding on mobile -- **Unstable_CheckboxGroupField** - - see **Unstable_FormControl**, **Unstable_FormGroup** -- **Unstable_CheckboxListItem** - - see **Unstable_ListItem** - - [fix] underlying `onClick` type preventing custom signature -- **Unstable_CheckboxMenuItem** - - see **Unstable_MenuItem** -- **Unstable_Dropdown** - - [feat] added - - Replaces v1 **DropdownContext** -- **Unstable_DropdownContext** - - [feat] added -- **Unstable_DropdownMenu** - - [feat] added - - Replaces v1 **DropdownMenu** -- **Unstable_DropdownTrigger** - - [feat] added - - Replaces v1 **DropdownButton** -- **Unstable_FormControl** - - [fix] `fullWidth` not working -- **Unstable_FormGroup** - - [style] remove `width: fit-content` -- **Unstable_Input** - - [fix] `fullWidth` not working - - [fix] overflowing out of parent that is smaller than the default width -- **Unstable_ListItem** - - [style] override Bootstrap.css -- **Unstable_MenuItem** - - see **Unstable_ListItem** -- **Unstable_RadioGroupField** - - see **Unstable_FormControl** -- **Unstable_SectionMessage** - - [style] reduce gap, padding on mobile -- **Unstable_Select** - - see **Unstable_Input** - - [fix] wrong icon size and spacing when `size="small"` - - [feat] added `renderLeadingEl`, `renderTrailingEl` for advanced customization -- **Unstable_Tab** - - [style] override Bootstrap.css -- **Unstable_TextField** - - see **Unstable_FormControl**, **Unstable_Input**, **Unstable_Select** -- **Unstable_ToastsContext** - - [feat] add properties to enqueue that are shorter ways to set the "severity" - - `toasts.enqueue.error(message, options)` - - `toasts.enqueue.info(message, options)` - - `toasts.enqueue.success(message, options)` - - `toasts.enqueue.warning(message, options)`of the toast while preserving the API: -- **useAutocomplete_unstable** - - [feat] added -- **useDropdown_unstable** - - [feat] added -- **useFormControl_unstable** - - [feat] improved default values and typings -- **useToasts_unstable** - - see **Unstable_ToastsContext** - - [feat] change default placement to `"bottom-center"` - -## [v2.0.0-alpha.9](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.8...v2.0.0-alpha.9) (2022-12-02) - -API surface: - -- **Unstable_Card** - - [fix] required props that should be optional: `orientation` -- **Unstable_Link** - - [feat] add `color` prop value: `inverse` - - [style] prevent non-inherited hover or visited colors when `color="inherit"` - - [feat] add `nowrap` prop -- **Unstable_Paper** - - [fix] required props that should be optional: `bgcolor` -- **useToasts_unstable** - - [fix] value changing every render or action (i.e. close, closeAll, enqueue) - - changed to a (reasonably) stable reference - -## [v2.0.0-alpha.8](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.7...v2.0.0-alpha.8) (2022-11-30) - -API surface: - -- **SparkThemeProvider** - - [revert] "[feat] changed to inject styles last (previously injected first) (v2.0.0-alpha.7)" -- **Unstable_Button** - - [revert] "[style] corrected text centering for all browsers (Chromium, Firefox, WebKit) (v2.0.0-alpha.7)" - - fixes bad overflow when width is constrained - - [revert] "[style] corrected height across all variants, sizes (v2.0.0-alpha.7)" - - fixes bad overflow when width is constrained - - [style] corrected text centering for most browsers (Chromium, WebKit) - - text will appear slightly above center in Firefox - - [style] correct height across all variants, sizes - - achieved in a different manner than the reverted work -- **Unstable_IconButton** - - [revert] "[style] corrected height across all variants, sizes (v2.0.0-alpha.7)" - - [style] correct height across all variants, sizes - - achieved in a different manner than the reverted work -- **Unstable_ModalDialog** - - [fix] required props that should be optional: `PaperComponent`, `PaperProps` - -## [v2.0.0-alpha.7](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.6...v2.0.0-alpha.7) (2022-11-28) - -API surface: - -- **SparkThemeProvider** - - [feat] changed to inject styles last (previously injected first) -- **theme** - - [feat] [unstable] added "radii" property - - property: `theme.unstable_radii` - - sub-properties: `zero, xs, sm, md, lg, xl, full` - - [breaking] removed "elevations" property - - see added "shadows" property for alternatives - - see migration guide - - [feat] [unstable] added "shadows" property - - property: `theme.unstable_shadows` - - sub-properties: `none, E100, E200, E300, E400, E500, focus, error, info, success, warning` - - [feat] [unstable] added "borders" property - - property: `theme.unstable_borders` - - sub-properties: `none, transparent, subtle, standard, bold, selected, active, expanded, hover, focus, error, info, success, warning` -- **Unstable_AvatarButton** - - [style] changed border color of "hover" -- **Unstable_Button** - - [style] corrected text centering for all browsers (Chromium, Firefox, WebKit) - - [style] corrected height across all variants, sizes -- **Unstable_Card** - - [feat] initial implementation -- **Unstable_CheckboxListItem** - - see **Unstable_ListItem** -- **Unstable_FormControl** - - [feat] added "size" prop - - values: `"small" | "medium"` - - default: `"medium"` - - [feat] added "success" prop - - values: `true | false` - - default: `false` - - [feat] add default support for accessibility by linking the descendent input (Input or Select), label (FormLabel), and helper text (FormHelperText). -- **Unstable_FormHelperText** - - [feat] added "size" prop - - values: `"small" | "medium"` - - default: `"medium"` -- **Unstable_FormLabel** - - [feat] added "size" prop - - values: `"small" | "medium"` - - default: `"medium"` -- **Unstable_IconButton** - - [style] corrected height across all variants, sizes -- **Unstable_Input** - - [feat] added "size" prop - - values: `"small" | "medium"` - - default: `"medium"` -- **Unstable_InputAdornment** - - [feat] added "size" prop - - values: `"small" | "medium"` - - default: `"medium"` -- **Unstable_ListItem** - - [style] remove browser-default outline on focus-visible -- **Unstable_MenuItem** - - see **Unstable_ListItem** -- **Unstable_Menu** - - [breaking] changed "PaperProps" (see **Unstable_Paper** changes) -- **Unstable_Paper** - - [breaking] removed "variant", "elevations" props - - see added props for alternatives - - see migration guide - - [feat] added "bgcolor", "border", "radius", "shadow" props -- **Unstable_Select** - - [feat] added "size" prop - - values: `"small" | "medium"` - - default: `"medium"` -- **Unstable_Switch** - - [style] improved alignment of thumb on track when size is "large" -- **Unstable_TextField** - - see **Unstable_FormControl** -- **useFormControl** - - [feat] added as a top-level directory -- **useFormControl_unstable** - - [feat] init -- **useRadioGroupMore** - - [feat] added as a top-level directory - - [breaking] removed (renamed to **useRadioGroupExtra_unstable**) -- **useRadioGroupExtra_unstable** - - [feat] init (renamed from **useRadioGroupMore**) -- **useTabsContext** - - [feat] added as a top-level directory - - [breaking] removed (renamed to **useTabs_unstable**) -- **useTabs_unstable** - - [feat] init (renamed from **useTabsContext**) -- **useToasts** - - [feat] added as a top-level directory - - [breaking] removed (renamed to **useToasts_unstable**) -- **useToasts_unstable** - - [feat] init (renamed from **useToasts**) - -Migration guide: - -``` -theme.unstable_elevations[0] -> theme.unstable_shadows.none -theme.unstable_elevations[100] -> theme.unstable_shadows.E100 -theme.unstable_elevations[200] -> theme.unstable_shadows.E200 -theme.unstable_elevations[300] -> theme.unstable_shadows.E300 -theme.unstable_elevations[400] -> theme.unstable_shadows.E400 -theme.unstable_elevations[500] -> theme.unstable_shadows.E500 - -useRadioGroupMore() -> useRadioGroupExtra_unstable() - -useTabsContext() -> useTabs_unstable() - -useToasts() -> useToasts_unstable() - - -> - -> or - -> - -> - -> - -> - -> - -> - -> or - -> - -> - -> - -> - -> - -> -``` - -## [v2.0.0-alpha.6](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.5...v2.0.0-alpha.6) (2022-11-16) - -### Fixes - -- **Unstable_Menu** - - Incompatibility with **DropdownMenu** when passed as override component. -- **Unstable_Tabs** - - Missing react import. -- **Unstable_TabsList** - - Missing react import. - -### Features - -- **Unstable_Menu** - - Make `open` prop optional. - -### Breaking changes - -- **Unstable_Tabs** - - Remove `number` and `true` from `value` in the `onChange` prop type (`(event, value) => void`). -- **Unstable_TabsContext** - - Remove `number` from the `value` property type and `value` in the `onSelected` property type (`(event, value) => void`). - -## [v2.0.0-alpha.5](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.4...v2.0.0-alpha.5) (2022-11-14) - -Added notistack v3 (alpha) as a dependency. - -### Features - -- **DropdownAnchor** - - Minor design change of Chevron Down icon. -- **Unstable_Button** - - Support ghost variant on inverse background with new color prop (mirror of Icon Button's API). - - Design changes: - - Corrected the background color of the stroked variant to white. - - Props API: - - `color`: added -- **Unstable_Select** - - Minor design change of Chevron Down icon. -- **Unstable_Tab** - - Initial implementation. -- **Unstable_TabPanel** - - Initial implementation. -- **Unstable_Tabs** - - Initial implementation. Replaces `TabsContext`. -- **Unstable_TabsList** - - Initial implementation. Replaces `TabList`. -- **Unstable_Toast** - - Initial implementation. -- **Unstable_ToastsProvider** - - Initial implementation. - -## [v2.0.0-alpha.4](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.3...v2.0.0-alpha.4) (2022-11-10) - -### Fixes - -- **Unstable_Menu** - - Missing elevation styles. - -### Features - -- **DropdownAnchor** - - When component is **Unstable_Button**, adds default trailing icon and styles (to override, simply set `trailingIcon`). -- **DropdownMenu** - - Allow overriding component. - - Improve offset from Dropdown Anchor when open. - - Props API: - - `component`: added, default of `Menu`. -- **Unstable_SwitchField** - - Increase label font weight. -- **useDropdownContext** - - Added return value property, `isOpen: boolean` to know whether the dropdown is open or not. - -## [v2.0.0-alpha.3](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.2...v2.0.0-alpha.3) (2022-11-07) - -### Fixes - -- **Unstable_Link** - - Clashing types for `variant` props resulting in `never`. - -### Features - -- **theme** - - Add "elevations" of 0, 100, 200, 300, 400, 500 (`theme.unstable_elevations[...]`). - - Add "overlay" to background palette (`theme.unstable_palette.background.overlay`). -- **Unstable_Avatar** - - Removed props-dynamic styles. -- **Unstable_Banner** - - Removed props-dynamic styles. -- **Unstable_Button** - - Removed props-dynamic styles. -- **Unstable_CssBaseline** - - Added global styles to support reduced motion by disabling animations, transitions. -- **Unstable_IconButton** - - Removed props-dynamic styles. -- **Unstable_Input** - - Removed props-dynamic styles. -- **Unstable_InputAdornment** - - Removed props-dynamic styles. -- **Unstable_Link** - - Removed props-dynamic styles. -- **Unstable_List** - - Removed props-dynamic styles. -- **Unstable_ListItem** - - Removed props-dynamic styles. -- **Unstable_Menu** - - Props API Changes: - - `PaperProps`: see **Unstable_Paper**. -- **Unstable_ModalDialog** - - Initial implementation. -- **Unstable_ModalDialogActions** - - Initial implementation. -- **Unstable_ModalDialogContent** - - Initial implementation. -- **Unstable_ModalDialogContentText** - - Initial implementation. -- **Unstable_ModalDialogTitle** - - Initial implementation. -- **Unstable_Paper** - - Changed elevations to match new theme elevations. - - Removed props-dynamic styles. - - Props API Changes: - - `elevation`: added values 100, 200, 300, 400, 500. -- **Unstable_SectionMessage** - - Removed props-dynamic styles. -- **Unstable_Select** - - Removed props-dynamic styles. - - Props API Changes: - - `MenuProps`: see **Unstable_Menu**. -- **Unstable_SvgIcon** - - Removed props-dynamic styles. -- **Unstable_Tag** - - Change background colors for subtle variant (spec-change). - - Removed props-dynamic styles. -- **Unstable_TextField** - - Props API Changes: - - `SelectProps`: see **Unstable_Select**. -- **Unstable_Typography** - - Change default `component` for heading variants to `'span'`. - - Removed props-dynamic styles. - -### Breaking changes - -- **Unstable_ContentGroup** - - CSS API: - - `alignItemsBaseline`: removed - - `alignItemsCenter`: removed - - `alignItemsFlexEnd`: removed - - `alignItemsStretch`: removed - - `colorInherit`: removed - - `disablePadding`: removed - - `typographyRow`: removed - - `typographyInset`: removed - - `typographyWrap`: removed - - `typographyWrapReverse`: removed - - `primaryWithSecondary`: removed - - `trailingActionFlexStart`: removed - - `wrap`: removed - - `wrapReverse`: removed - - Migration: - - `alignItemsBaseline` -> ` ` (remove) (move styles to `root`) - - `alignItemsCenter` -> ` ` (remove) (move styles to `root`) - - `alignItemsFlexEnd` -> ` ` (remove) (move styles to `root`) - - `alignItemsStretch` -> ` ` (remove) (move styles to `root`) - - `colorInherit` -> ` ` (remove) (move styles to `root`) - - `disablePadding` -> ` ` (remove) (move styles to `root`) - - `typographyRow` -> ` ` (remove) (move styles to `typography`) - - `typographyInset` -> ` ` (remove) (move styles to `typography`) - - `typographyWrap` -> ` ` (remove) (move styles to `typography`) - - `typographyWrapReverse` -> ` ` (remove) (move styles to `typography`) - - `primaryWithSecondary` -> ` ` (remove) (move styles to `primary`) - - `trailingActionFlexStart` -> ` ` (remove) (move styles to `trailingAction`) - - `wrap` -> ` ` (remove) (move styles to `root`) - - `wrapReverse` -> ` ` (remove) (move styles to `root`) -- **Unstable_Divider** - - CSS API: - - `rootDarker`: removed - - `rootInset`: removed - - `rootMiddle`: removed - - Migration: - - `rootDarker` -> ` ` (remove) (move styles to `root`) - - `rootInset` -> ` ` (remove) (move styles to `root`) - - `rootMiddle` -> ` ` (remove) (move styles to `root`) -- **Unstable_Divider** - - CSS API: - - `rootWithSecondaryAction`: removed - - `button`: removed - - `nest`: removed - - `secondaryActionFlexStart`: removed - - Migration: - - `rootWithSecondaryAction` -> ` ` (remove) (move styles to `root`) - - `button` -> ` ` (remove) (move styles to `root`) - - `nest` -> ` ` (remove) (move styles to `root`) - - `secondaryActionFlexStart` -> ` ` (remove) (move styles to `secondaryAction`) -- **Unstable_List** - - CSS API: - - `rootWithSubheader`: removed - - `rootWithPadding`: removed - - Migration: - - `rootWithSubheader` -> ` ` (remove) (move styles to `root`) - - `rootWithPadding` -> ` ` (remove) (move styles to `root`) -- **Unstable_Paper** - - Props API: - - `elevation`: removed values 1..24. - - CSS API: - - `scrollPaper`: removed - - `scrollBody`: removed - - `paperScrollPaper`: removed - - `paperScrollBody`: removed - - `paperWidthFalse`: removed - - `paperWidthXs`: removed - - `paperWidthSm`: removed - - `paperWidthMd`: removed - - `paperWidthLg`: removed - - `paperWidthXl`: removed - - `paperFullWidth`: removed - - `paperFullScreen`: removed - - Migration: - - Props API: - - `elevation={1}` -> `elevation={100}` - - `elevation={2}` -> `elevation={200}` - - `elevation={3}` -> `elevation={300}` - - `elevation={4}` -> `elevation={400}` - - `elevation={5}` -> `elevation={500}` - - `elevation={6..24}` -> `elevation={500}` - - CSS API: - - `scrollPaper` -> ` ` (remove) (move styles to `root`) - - `scrollBody` -> ` ` (remove) (move styles to `root`) - - `paperScrollPaper` -> ` ` (remove) (move styles to `root`) - - `paperScrollBody` -> ` ` (remove) (move styles to `root`) - - `paperWidthFalse` -> ` ` (remove) (move styles to `root`) - - `paperWidthXs` -> ` ` (remove) (move styles to `root`) - - `paperWidthSm` -> ` ` (remove) (move styles to `root`) - - `paperWidthMd` -> ` ` (remove) (move styles to `root`) - - `paperWidthLg` -> ` ` (remove) (move styles to `root`) - - `paperWidthXl` -> ` ` (remove) (move styles to `root`) - - `paperFullWidth` -> ` ` (remove) (move styles to `root`) - - `paperFullScreen` -> ` ` (remove) (move styles to `root`) -- **Unstable_Switch** - - CSS API: - - `sizeMedium`: removed - - `sizeLarge`: removed - - Migration: - - `sizeMedium` -> ` ` (remove) (move styles to `root`) - - `sizeLarge` -> ` ` (remove) (move styles to `root`) -- **Unstable_Tooltip** - - CSS API: - - `arrowPlacementBottom`: removed - - `arrowPlacementRight`: removed - - `arrowPlacementLeft`: removed - - `arrowPlacementTop`: removed - - `tooltipPlacementBottom`: removed - - `tooltipPlacementRight`: removed - - `tooltipPlacementLeft`: removed - - `tooltipPlacementTop`: removed - - Migration: - - `arrowPlacementBottom` -> ` ` (remove) (move styles to `arrow`) - - `arrowPlacementRight` -> ` ` (remove) (move styles to `arrow`) - - `arrowPlacementLeft` -> ` ` (remove) (move styles to `arrow`) - - `arrowPlacementTop` -> ` ` (remove) (move styles to `arrow`) - - `tooltipPlacementBottom` -> ` ` (remove) (move styles to `tooltip`) - - `tooltipPlacementRight` -> ` ` (remove) (move styles to `tooltip`) - - `tooltipPlacementLeft` -> ` ` (remove) (move styles to `tooltip`) - - `tooltipPlacementTop` -> ` ` (remove) (move styles to `tooltip`) -- **Unstable_Typography** - - Props API: - - `variantMapping`: removed. - - Migration: - - Props API: - - `variantMapping={...}` -> ` ` (remove) (use `component` prop directly) - -## [v2.0.0-alpha.2](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.1...v2.0.0-alpha.2) (2022-09-08) - -### Fixes - -- The `StyledComponentProps` type from the "./utils/StandardProps" file being included in the ESM JavaScript build output. This prevented compilation for some applications. - -## [v2.0.0-alpha.1](https://github.com/prenda-school/prenda-spark/compare/v1.0.0...v2.0.0-alpha.1) (2022-08-29) - -Restore all unstable exports (components, properties, utilities). Identical to v1.0.0-alpha.14. - -## [v1.0.0](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.14...v1.0.0) (2022-08-24) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -Removed all unstable exports (components, properties, utilities) in preparation of v1 stable release. - -Migration: Skip this version if you depend on both stable and unstable exports. Migrate to v2.0.0-alpha.1 instead. - -## [v1.0.0-alpha.14](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.13...v1.0.0-alpha.14) (2022-08-23) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_ContentGroup** - - Initial implementation. -- **Unstable_CheckboxListItem** - - Props API Changes: see **Unstable_ListItem** Props API Changes. - - CSS API Changes: - - `label`: added - - `primary`: removed - - Migration: - - CSS API: - - `primary` -> `label` -- **Unstable_CheckboxMenuItem** - - see **Unstable_CheckboxListItem** -- **Unstable_ListItem** - - Props API Changes: - - `alignItems`: changed default to `"flex-start"`. - - `ContentGroupProps`: added; see Props API of **Unstable_ContentGroup**. - - `disableFocusable`: added; values: `undefined | true | false`; default: `false`. - - `flexWrap`: removed - - `focusableButton`: removed; see `disableFocusable` - - `inset`: removed - - `leadingEl`: removed - - `primary`: removed - - `primaryTypographyProps`: removed - - `row`: removed - - `secondary`: removed - - `secondaryTypographyProps`: removed - - `tertiary`: removed - - `tertiaryTypographyProps`: removed - - CSS API Changes: - - `contentGroup`: removed - - `contentGroupRow`: removed - - `contentGroupInset`: removed - - `contentGroupWrap`: removed - - `contentGroupWrapReverse`: removed - - `flexWrapWrap`: removed - - `flexWrapReverse`: removed - - `leadingEl`: removed - - `primary`: removed - - `primaryAndSecondary`: removed - - `secondary`: removed - - `tertiary`: removed - - Migration: - - Props API: - - ` ` (no `alignItems` set) -> `alignItems='stretch'` - - `alignItems="flex-start"` -> ` ` (remove) - - `focusableButton={false}` -> `disableFocusable` - - `flexWrap={...}` -> `ContentGroupProps={{ flexWrap: (...) }}` - - `leadingEl={...}` -> `ContentGroupProps={{ leadingEl: (...) }}` - - `inset={...}` -> `ContentGroupProps={{ inset: (...) }}` - - `primary={...}` -> `ContentGroupProps={{ primary: (...) }}` - - `primaryTypographyProps={...}` -> `ContentGroupProps={{ primaryTypographyProps: (...) }}` - - `row={...}` -> `ContentGroupProps={{ row: (...) }}` - - `secondary={...}` -> `ContentGroupProps={{ secondary: (...) }}` - - `secondaryTypographyProps={...}` -> `ContentGroupProps={{ secondaryTypographyProps: (...) }}` - - `tertiary={...}` -> `ContentGroupProps={{ tertiary: (...) }}` - - `tertiaryTypographyProps={...}` -> `ContentGroupProps={{ tertiaryTypographyProps: (...) }}` - - CSS API - - `contentGroup` -> `ContentGroupProps.classes.root` - - `contentGroupRow` -> `ContentGroupProps.classes.root` - - `contentGroupInset` -> `ContentGroupProps.classes.root` - - `contentGroupWrap` -> `ContentGroupProps.classes.wrap` - - `contentGroupWrapReverse` -> `ContentGroupProps.classes.wrapReverse` - - `flexWrapWrap` -> move styles to `root` - - `flexWrapReverse` -> move styles to `root` - - `leadingEl` -> `ContentGroupProps.classes.leadingEl` - - `primary` -> `ContentGroupProps.classes.primary` - - `primaryAndSecondary` -> `ContentGroupProps.classes.primaryWithSecondary` - - `secondary` -> `ContentGroupProps.classes.secondary` - - `tertiary` -> `ContentGroupProps.classes.tertiary` -- **Unstable_MenuItem** - - see **Unstable_ListItem** - -## [v1.0.0-alpha.13](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2022-08-23) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_Tooltip** - - Fixed "React is not defined" error - -## [v1.0.0-alpha.12](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.11...v1.0.0-alpha.12) (2022-08-22) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_CheckboxField** - - Fixed wrong ordering of class names. -- **Unstable_CheckboxGroupField** - - See **Unstable_FormLabel** props API changes. -- **Unstable_CheckboxListItem** - - Fixed swallowing `className` prop. - - See **Unstable_ListItem** props API changes. -- **Unstable_CheckboxMenuItem** - - Fixed swallowing `className` prop. - - Removed focus effect on inner checkbox element. - - See **Unstable_ListItem** props API changes. -- **Unstable_FormControlLabel** - - Fixed wrong ordering of class names. -- **Unstable_FormLabel** - - Fixed wrong margin when rendered under `SparkThemeProvider`. -- **Unstable_Input** - - Fixed wrong margin when rendered under `SparkThemeProvider`. -- **Unstable_ListItem** - - Props API Changes: - - `nested`: added; values: `undefined | true | false` where `true` is default. -- **Unstable_Menu** - - Fixed swallowing `classes` and `className` props. -- **Unstable_MenuItem** - - Fixed swallowing `className` prop. - - See **Unstable_ListItem** props API changes. -- **Unstable_MenuList** - - Fixed swallowing `classes` and `className` props. -- **Unstable_Paper** - - Fixed swallowing `className` prop. -- **Unstable_RadioField** - - Fixed wrong ordering of class names. -- **Unstable_RadioGroupField** - - See **Unstable_FormLabel** props API changes. -- **Unstable_Select** - - See **Unstable_Input** for changes. -- **Unstable_Switch** - - Initial implementation. -- **Unstable_SwitchField** - - Initial implementation. -- **Unstable_Tag** - - Fixed wrong font weight style of small size. -- **Unstable_TextField** - - See **Unstable_FormLabel** and **Unstable_Input** for changes. -- **Unstable_Tooltip** - - Initial implementation. - -## [v1.0.0-alpha.11](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.10...v1.0.0-alpha.11) (2022-07-11) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_AvatarButton** - - Props API changes: - - `size`: added; values `'large' | 'medium'` where `'large'` is default. -- **Unstable_CheckboxListItem** - - Initial implementation. -- **Unstable_CheckboxMenuItem** - - Initial implementation. -- **Unstable_Divider** - - Initial implementation. -- **Unstable_Link** - - Props API changes: - - `variant`: added; values `'standard' | 'alias'` where `'standard'` is default. -- **Unstable_List** - - Initial implementation. -- **Unstable_ListItem** - - Initial implementation. -- **Unstable_ListSubheader** - - Initial implementation. -- **Unstable_Menu** - - Initial implementation. -- **Unstable_MenuItem** - - Initial implementation. -- **Unstable_MenuList** - - Initial implementation. -- **Unstable_Paper** - - Initial implementation. -- **Unstable_Select** - - Props API changes: - - `preventMultipleOverflow` - - Added - - Values: `'large' | 'medium'` where `'large'` is default - - Purpose: Prevent the component from overflowing vertically (particularly when render the value as a tag) (note, a horizontal scrollbar will appear and cause some vertical growth). - - `renderValueAsTag`: - - Added - - Values: `true | false` where `false` is default - - Purpose: Render the value(s) as an `Unstable_Tag` component(s). - - Breaking Change: set `renderValueAsTag={true}` where previously only `multiple={true}` and the desire is to render the values as Tag components. - - Styles: match new menu (paper) specifications. -- **Unstable_TextField** - - See **Unstable_Select** - -## [v1.0.0-alpha.10](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.9...v1.0.0-alpha.10) (2022-06-22) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_CheckboxGroupField** - - See **Unstable_FormGroup** -- **Unstable_FormGroup** - - Styles: widen gap in row layout. -- **Unstable_RadioGroup** - - See **Unstable_FormGroup** -- **Unstable_RadioGroupField** - - See **Unstable_FormGroup** - -## [v1.0.0-alpha.9](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-06-21) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_Avatar** - - Initial implementation of **Avatar** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`, `"img"`, `"fallback"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`, `"img"`, `"fallback"`_. - - `color`: Added. - - Values: `"neutral"` (default), `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"purple"`, `"teal"`, `"magenta"`. - - `size`: - - Removed values: `xsmall`. - - Planned Migration from current `Avatar`: - - `size='xsmall'` -> `size='small'` -- **Unstable_AvatarButton** - - Initial implementation. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API: `'root' | 'avatar'`. - - Props API: - - Inherits props of ButtonBase and Unstable_Avatar. - - `classes`: _see CSS API_. - - `size`: restricted to only `'large'` (for accessibility). -- **Unstable_Banner** - - Initial implementation of **Banner** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `'root' | 'icon' | 'message' | 'action'`_. - - Props API Changes: - - `classes`: Removed all class keys _except `'root' | 'icon' | 'message' | 'action'`_. -- **Unstable_Button** - - Added support for a leading Avatar (`leadingAvatar`). - - Replaced `startIcon` and `endIcon` with `leadingIcon` and `trailingIcon`, respectively. - - Props API changes: - - `classes`: removed `'startIcon' | 'endIcon'` class keys; added `'leadingAvatar' | 'leadingIcon' | 'trailingIcon'` class keys - - `endIcon`: removed - - `leadingAvatar`: added - - `leadingIcon`: added - - `startIcon`: removed - - `trailingIcon`: added - - Migration: - - `startIcon={...}` -> `leadingIcon={...}` - - `endIcon={...}` -> `trailingIcon={...}` -- **Unstable_Checkbox** - - Initial implementation of **Checkbox** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `'root'`_. - - Props API Changes: - - `classes`: removed all class keys _except `'root'`_ - - `color`: removed - - `edge`: removed - - `error`: added; display the component in an error state - - `size`: removed -- **Unstable_CheckboxField** - - Initial implementation -- **Unstable_CheckboxGroupField** - - Initial implementation -- **Unstable_FormControl** - - Initial implementation of **FormControl** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `'root'`_. - - Props API Changes: - - `classes`: removed all class keys _except `'root'`_ - - `color`: removed - - `hiddenLabel`: removed - - `margin`: removed - - `size`: removed - - `variant`: removed -- **Unstable_FormControlLabel** - - Initial implementation of **FormControlLabel** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `'root' | 'label'`_. - - Props API Changes: - - `classes`: removed all class keys _except `'root' | 'label'`_ - - `error`: added; display the label and control in an error state - - `required`: added; the control element will be required -- **Unstable_FormGroup** - - Initial implementation of **FormGroup** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `'root'`_. - - Props API Changes: - - `classes`: removed all class keys _except `'root'`_ -- **Unstable_FormHelperText** - - Remove default margin. - - Support text lists in children. - - Props API Changes: - - `children`: changed; removed reserving line height when `children=' '` -- use `reserveLineHeight` instead - - `leadingIcon`: added; icon placed before the children - - `reserveLineHeight`: added; reserve one line height when neither `children` nor `leadingIcon` is truthy -- **Unstable_FormLabel** - - Initial implementation of **FormLabel** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `'root' | 'asterisk'`_. - - Props API Changes: - - `classes`: removed all class keys _except `'root' | 'asterisk'`_ - - `color`: removed - - `filled`: removed -- **Unstable_IconButton** - - Add `color` prop with preliminary support for the `"ghost"` variant on inverse backgrounds. - - values: `"standard" | "inverse"` - - default value: `"standard"` - - (does not affect display of `"primary" | "stroked"` variants yet -- planned for future) -- **Unstable_Input** - - Remove default margin that accounted for the box-shadow effects. -- **Unstable_InputLabel** - - **Removed**. - - Migration: use Unstable_FormLabel instead as a one-to-one replacement. -- **Unstable_Radio** - - Initial implementation of **Radio** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `'root'`_. - - Props API Changes: - - `classes`: removed all class keys _except `'root'`_ - - `color`: removed - - `edge`: removed - - `error`: added; display the component in an error state - - `size`: removed -- **Unstable_RadioField** - - Initial implementation -- **Unstable_RadioGroup** - - Initial implementation of **RadioGroup** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `'root'`_. - - Props API Changes: - - `classes`: removed all class keys _except `'root'`_ - - `required`: added; descendant controls (i.e. `input` elements) will be required -- **Unstable_RadioGroupField** - - Initial implementation -- **Unstable_SectionMessage** - - Fix `closeText` not being applied to the _close_ icon button (resulted in not having an accessible name, i.e. `aria-label`). - - Add `CloseProps` prop to apply props to the _close_ icon button. -- **Unstable_Select** - - (see Unstable_Input) -- **Unstable_TextField** - - (see Unstable_Input, Unstable_InputLabel, Unstable_FormHelperText) - - Props API Changes: - - `InputLabelProps`: removed - - `FormLabelProps`: added; applied to the `FormLabel` element - - Internal: - - use Unstable_FormLabel instead of Unstable_InputLabel - - use Unstable_FormControl instead of FormControl - -## [v1.0.0-alpha.8](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-06-03) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_Button** - - Improve the visual alignment of text and icons. -- **Unstable_SectionMessage** - - Improve the visual look. - -## [v1.0.0-alpha.7](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-05-27) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_Button** - - Fix conflicting styles from previous `theme` (e.g. when rendered under `SparkThemeProvider`) when disabled or given start or end icons. -- **Unstable_IconButton** - - Initial implementation of **IconButton** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`, `"label"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`, `"label"`_. - - `color`: Removed. - - `disableElevation`: Removed. - - `disableFocusRipple`: Removed. - - `disableRipple`: Removed. - - `disableTouchRipple`: Removed. - - `centerRipple`: Removed. - - `focusRipple`: Removed. - - `TouchRippleProps`: Removed. - - `variant`: - - Removed values: `contained`, `outlined`, `text`. - - Added values: `primary`, `stroked`, `ghost`. - - Planned Migration from current `IconButton`: - - `color={*}` -> _removed_ - - `disableElevation` -> _removed_ - - `disableFocusRipple` -> _removed_ - - `disableRipple` -> _removed_ - - `disableTouchRipple` -> _removed_ - - `centerRipple` -> _removed_ - - `focusRipple` -> _removed_ - - `TouchRippleProps={*}` -> _removed_ - - `variant="contained"` -> `variant="primary"` - - `variant="outlined"` -> `variant="stroked"` - - `variant="text"` -> `variant="ghost"` -- **Unstable_SectionMessage** - - Implemented `Unstable_IconButton` for the close icon button displayed when the `onClose` prop is set and the `action` prop is not set. -- **Unstable_Typography** - - Fix component typing so `variant` and `color` props appear as a discriminated union of string literals (i.e. `'body' | 'description' | ...`) instead of just `string`. - - Fix variant T22 having wrong font weight. - -## [v1.0.0-alpha.6](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-04-29) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **Unstable_Button** - - Fix conflicting styles from previous `theme` (e.g. when rendered under `SparkThemeProvider`) for pseudo states like hover, disabled, etc. -- **Unstable_Select** - - When `multiple={true}`, the values are rendered as tags (using `Unstable_Tag`). - - Fix value text overlapping with start adornment. - - Props API Changes: - - `getTapProps`: added for customizing the props for each rendered tag when `multiple={true}`. -- **Unstable_Tag** - - Initial implementation of `Tag` replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root", "label", "deleteIcon", "avatar", "icon"`_. - - Props API Changes: - - `classes` - - Removed all values except `"root", "label", "deleteIcon", "avatar", "icon"`. - - `color` - - Removed value: `"default"`. - - Added value: `"neutral"` (default). - - Planned migration from current `Tag`: - - `color="default"` -> `color="neutral"` (or omit) - -## [v1.0.0-alpha.5](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-04-25) - -### Fixes - -- **Select** - - React compiler warning that "react" was not in scope for necessary transformation in theme defaults file. - -## [v1.0.0-alpha.4](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-04-15) - -### Features - -- **CssBaseline** - - No longer advised to wrap this in `ThemeProvider`. The global styles will be injected regardless. -- **FontFacesBaseline** - - Initial implementation. - - Injects global font-face declarations used by theme's typography, without the need to be wrapped in a **ThemeProvider** (or **SparkThemeProvider**). - - Extraction of the global font-face declarations previously injected by **CssBaseline** (only when wrapped in **SparkThemeProvider**). - -### Fixes - -- **Banner** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **Button** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **Checkbox** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **FormControlLabel** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **IconButton** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **InputBase** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **MenuItem** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **NavBarButton** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **Pagination** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **PaginationItem** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **Radio** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **SectionMessage** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **Select** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **StepIcon** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **Switch** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **Tab** - - Styles: apply focus styles on `:focus-visible` not `:focus`. -- **Tag** - - Styles: apply focus styles on `:focus-visible` not `:focus`. - -### Breaking - -- **CssBaseline** - - No longer injects global font-face declarations. - - Migration: render **FontFacesBaseline** (``) at the root of your app (or anywhere) (only needed once per app). -- **SparkThemeProvider** - - No longer renders **CssBaseline**. - - Migration: render **CssBaseline** (``) at the root of your app (or anywhere) (only needed once per app). - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **unstable_createSvgIcon** - - Exported from package root for public / consumer use -- no longer internal. -- **unstable_fontFaces** - - Removed reference to `.woff` files. - - New asset paths are expected to be served by the corresponding application server. Consumers should copy-paste the contents of `libs/spark/public/pds-assets-v1` into their application so they are served at the root path of their URL. -- **Unstable_Button** - - Initial implementation of **Button** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`, `"label"`, `"startIcon"`, and `"endIcon"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`, `"label"`, `"startIcon"`, and `"endIcon"`_. - - `color`: Removed. - - `disableElevation`: Removed. - - `disableFocusRipple`: Removed. - - `disableRipple`: Removed. - - `disableTouchRipple`: Removed. - - `centerRipple`: Removed. - - `focusRipple`: Removed. - - `TouchRippleProps`: Removed. - - `variant`: - - Removed values: `contained`, `outlined`, `text`. - - Added values: `primary`, `stroked`, `ghost`, `destructive`. - - Only `destructive` is new, the others were renamed. - - Planned Migration from current `Button`: - - `color={*}` -> _removed_ - - `disableElevation` -> _removed_ - - `disableFocusRipple` -> _removed_ - - `disableRipple` -> _removed_ - - `disableTouchRipple` -> _removed_ - - `centerRipple` -> _removed_ - - `focusRipple` -> _removed_ - - `TouchRippleProps={*}` -> _removed_ - - `variant="contained"` -> `variant="primary"` - - `variant="outlined"` -> `variant="stroked"` - - `variant="text"` -> `variant="ghost"` -- **Unstable_CssBaseline** - - Initial implementation of **CssBaseline** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. -- **Unstable_FontFacesBaseline** - - Initial implementation of **FontFacesBaseline** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. -- **Unstable_FormHelperText** - - Initial implementation of **FormHelperText** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`_. - - `filled`: Removed. - - `margin`: Removed. - - `variant`: Removed. -- **Unstable_Input** - - Initial implementation of **Input** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`, `"input"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`, `"input"`_. - - `color`: Removed. - - `endAdornment`: Removed. - - `margin`: Removed. - - `leadingEl`: - - Added. - - Replaces `startAdornment` and removes the need for consumers to wrap the content in **InputAdornment** by making that the default behavior. - - `rows`: Removed. - - `rowsMax`: Removed. - - `rowsMin`: Removed. - - `startAdornment`: Removed. - - `success`: - - Added. - - If present (truthy), the input will indicate a success. (Similar to behavior of `error`, but opposite semantic.) - - `trailingEl`: - - Added. - - Replaces `endAdornment` and removes the need for consumers to wrap the content in **InputAdornment** by making that the default behavior. - - Planned Migration from current `Input`: - - `color={*}` -> _removed_ - - `endAdornment={}` -> `trailingEl={}` - - `margin={*}` -> _removed_ - - `rows={*}` -> `minRows={*}` - - `rowsMax={*}` -> `maxRows={*}` - - `rowsMin={*}` -> `minRows={*}` - - `startAdornment={}` -> `leadingEl={}` -- **Unstable_InputAdornment** - - Initial implementation of **InputAdornment** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`_. -- **Unstable_InputLabel** - - Initial implementation of **InputLabel** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`_. - - `color`: Removed. - - `disableAnimation`: Removed. - - `filled`: Removed. - - `margin`: Removed. - - `shrink`: Removed. - - `variant`: Removed. -- **Unstable_Link** - - Initial implementation of `Link` replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`_. - - Props API Changes: - - `classes` - - Removed all class keys _except `"root"`_. - - `color` - - Removed values: `"initial"`, `"primary"`, `"secondary"`, `"textPrimary"`, `"textSecondary"`, `"error"`. - - Added value: `"default"` (default). - - Planned migration from current `Link`: - - `color="initial"` -> _removed_ - - `color="primary"` -> _removed_ - - `color="secondary"` -> _removed_ - - `color="textPrimary"` -> _removed_ - - `color="textSecondary"` -> _removed_ - - `color="error"` -> _removed_ -- **Unstable_SectionMessage** - - Initial implementation of **SectionMessage** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`_. - - `title`: - - Added. - - Replaces use of the **SectionMessageTitle** component which will be removed in the next major version. -- **Unstable_Select** - - Initial implementation of **Select** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`, `"icon"`, `"iconOpen"`, `"nativeInput"`_. - - Props API Changes: - - `classes`: Removed all class keys _except `"root"`, `"icon"`, `"iconOpen"`, `"nativeInput"`_. - - `label`: Removed. - - `labelId`: Removed. - - `labelWidth`: Removed. - - `variant`: Removed. - - See **Unstable_Input** for additional, underlying changes. -- **Unstable_SvgIcon** - - Initial implementation of `SvgIcon` replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - CSS API Changes: - - Removed all class keys _except `"root"`_. - - Props API Changes: - - `classes` - - Removed all class keys _except `"root"`_. - - `color` - - Removed values: `"dark"`, `"light"`, `"white"`, `"disabled"`, `"error"`, `"success"`, `"warning"`, `"info"`. - - Added values: `"normal"`, `"secondary"`, `"inverse"`, `"inverseSecondary"` - - `fontSize` - - Removed value: `"default"`. - - Added value: `"xlarge"`. - - `lowContrast` - - Removed. - - Planned migration (from current **SvgIcon**): - - `color="dark"` -> `color="normal"` - - `color="light"` -> `color="inverse"` - - `color="white"` -> _removed_ - - `color="disabled"` -> _removed_ - - `color="error"` -> _removed_ - - `color="success"` -> _removed_ - - `color="warning"` -> _removed_ - - `color="info"` -> _removed_ - - `fontSize="default"` -> `fontSize="medium"` - - `lowContrast color="dark"` -> `color="secondary"` - - `lowContrast color="light"` -> `color="inverseSecondary"` - - `lowContrast"` -> _removed_ -- **Unstable_TextField** - - Initial implementation of **TextField** replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - Props API Changes: - - `variant`: Removed. - - See **Unstable_Input** and **Unstable_Select** for additional, underlying changes. - -## [v1.0.0-alpha.3](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2022-11-07) - -### Unstable Preview - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -The term "unstable / unstable preview" replaces "next" and the prefix "`unstable_`" replaces "`__next__`". - -- **theme** - - Renamed unstable properties. - - Migration: - - `theme.__next__palette` -> `theme.unstable_palette` - - `theme.__next__typography` -> `theme.unstable_typography` -- **unstable_fontFaces** - - Renamed, see below. - - Added: - - Inter Semibold font files (see `/libs/spark/public/fonts`) and font face declarations. - - `unstable_fontFaces.interSemibold` - - `unstable_fontFaces.interSemiboldItalic` - - Fixed: - - Inter "semibold" font weight (600) misnamed "bold" and pulling bold font file. -- **unstable_palette** - - Renamed, see below. -- **unstable_typography** - - Renamed, see below. -- **\_\_next\_\_fontFaces** - - Removed. - - Migration: - - `__next__fontFaces` -> `unstable_fontFaces` -- **\_\_next\_\_palette** - - Removed. - - Migration: - - `__next__palette` -> `unstable_palette` -- **\_\_next\_\_typography** - - Removed. - - Migration: - - `__next__typography` -> `unstable_typography` -- **Unstable_Typography** - - Initial implementation of `Typography` replacement according to PDS v2. - - Supports rendering _without_ `theme` being in an ancestor `ThemeProvider`. - - Planned migration from current `Typography`: - - "color" prop values: - - `"dark"` -> _omit_ or `"default"` - - `"light"` -> `"inverse"` - - "classes" prop: - - Removed all class keys _except `"root"`_. (Styling is determined dynamically by props, with single specificity -- consumers should replicate.) - - "lowContrast" prop: - - Removed. - - "variant" prop: - - `"display-lg"` -> `"display"` - - `"display-md"` -> `"display"` - - `"display-sm"` -> `"display"` - - `"heading-xl"` -> `"T32"` - - `"heading-lg"` -> `"T28"` - - `"heading-md"` -> `"T22"` - - `"heading-sm"` -> `"T18"` - - `"uppercase-lg"` -> `"T14"` - - `"uppercase-md"` -> `"T14"` - - `"uppercase-sm"` -> `"T14"` - - `"paragraph-xl"` -> `"body"` - - `"paragraph-lg"` -> `"body"` - - `"paragraph-md"` -> `"description"` - - `"paragraph-sm"` -> `"description"` - - `"label-xl"` -> `"label"` - - `"label-xl-strong"` -> `"label"` - - `"label-lg"` -> `"label"` - - `"label-lg-strong"` -> `"label"` - - `"label-md"` -> `"label"` - - `"label-md-strong"` -> `"label"` - - `"label-sm"` -> `"label"` - - `"label-sm-strong"` -> `"label"` - - `"code-lg"` -> `"code"` - - `"code-md"` -> `"code"` - - `"code-sm"` -> `"code"` - -## [v1.0.0-alpha.2](https://github.com/prenda-school/prenda-spark/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2022-02-25) - -### **next** - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **\_\_next\_\_typography** - - Added `font-feature-settings` for "body" and "description" variants. - - Added "label" variant (with `font-feature-settings`). - - Planned migration: - - "labels" - - `typography["label-xl"]` -> `typography.label` - - `typography["label-xl-strong"]` -> `typography.label` - - `typography["label-lg"]` -> `typography.label` - - `typography["label-lg-strong"]` -> `typography.label` - - `typography["label-md"]` -> `typography.label` - - `typography["label-md-strong"]` -> `typography.label` - - `typography["label-sm"]` -> `typography.label` - - `typography["label-sm-strong"]` -> `typography.label` - -## [v1.0.0-alpha.1](https://github.com/prenda-school/prenda-spark/compare/v0.16.0...v1.0.0-alpha.1) (2021-11-30) - -Transitioned to new version format for pre-1.0 releases: `v1.0.0-alpha.XXX` where `XXX` is the iteration. - -### Fixes - -- **Button** - - Styling: incorrect default height when `variant=("outlined" | "text")` - -### Features - -- **Breadcrumbs** - - Re-exported with custom styles and props. -- **Collapse** - - Backport support for `orientation="horizontal"` from MUI v5. -- **Link** - - Re-exported with custom styles and props. - -### **next** - -_This section details previews of breaking changes or experimental features that are subject to breaking changes at any time._ - -- **theme** - - Attached preview properties: `theme. - - Migration: - - `theme.__next__palette` - - `theme.__next__typography` -- **\_\_next\_\_fontFaces** - - Implemented according to PDS v2. - - As a consumer, you should serve the contents of `libs/spark/public/fonts/` directory on your server at the same path, `fonts/`. Do not change any file or directory names and structure, as they are exactly what is expected by the injected font face declarations. -- **\_\_next\_\_palette** - - Implemented according to PDS v2. - - Preview: `theme.__next__palette.*` - - Descriptive changes from current `palette` (PDS v1): - - "tertiary": - - renamed to just "colors". - - removed "orange". - - added "teal", "magenta". - - expanded from 5 to 7 options. - - "brand": - - renamed "peach" to "lightOrange". - - "neutrals": - - replaced descriptive field names with numeric keys. - - "background": - - removed "lightBlue" option. - - replaced color references with aliases. - - "text": - - replaced color type ("light", "dark") references with semantic aliases ("heading", "body", "subdued", ..., "inverseHeading", ...). - - expanded from 4 to 12 options. - - "tones": - - New! for skin tones. - - added "warm", "neutral", "cool" -- each with 5 options. - - Planned migration: - - "brand": - - `palette.brand.peach` -> `palette.brand.lightOrange` - - "full palette" / "tertiary" colors / "colors": - - `palette.red[1]` -> `palette.red[100]` - - `palette.red[2]` -> `palette.red[300]` - - `palette.red[3]` -> `palette.red[500]` - - `palette.red[4]` -> `palette.red[600]` - - `palette.red[5]` -> `palette.red[700]` - - `palette.orange[1...5]` -> **removed** - - `palette.yellow[1]` -> `palette.yellow[100]` - - `palette.yellow[2]` -> `palette.yellow[300]` - - `palette.yellow[3]` -> `palette.yellow[500]` - - `palette.yellow[4]` -> `palette.yellow[600]` - - `palette.yellow[5]` -> `palette.yellow[700]` - - `palette.blue[1]` -> `palette.blue[100]` - - `palette.blue[2]` -> `palette.blue[300]` - - `palette.blue[3]` -> `palette.blue[500]` - - `palette.blue[4]` -> `palette.blue[600]` - - `palette.blue[5]` -> `palette.blue[700]` - - `palette.purple[1]` -> `palette.purple[100]` - - `palette.purple[2]` -> `palette.purple[300]` - - `palette.purple[3]` -> `palette.purple[500]` - - `palette.purple[4]` -> `palette.purple[600]` - - `palette.purple[5]` -> `palette.purple[700]` - - `palette.green[1]` -> `palette.green[100]` - - `palette.green[2]` -> `palette.green[400]` (_note: 400, not 300_) - - `palette.green[3]` -> `palette.green[500]` - - `palette.green[4]` -> `palette.green[600]` - - `palette.green[5]` -> `palette.green[700]` - - "product colors" or "condition state" colors: - - `palette.error.main` -> removed (_note: if you require this alias, use `palette.red[700]`_) - - `palette.warning.main` -> removed (_note: if you require this alias, use `palette.yellow[500]`_) - - `palette.info.main` -> removed (_note: if you require this alias, use `palette.blue[600]`_) - - `palette.success.main` -> removed (_note: if you require this alias, use `palette.green[600]`_) - - "neutrals": - - `palette.common.white` -> `palette.neutral[0]` - - `palette.grey.lighter` -> `palette.neutral[60]` - - `palette.grey.light` -> `palette.neutral[70]` - - `palette.grey.medium` -> `palette.neutral[80]` - - `palette.grey.dark` -> `palette.neutral[90]` - - `palette.blue[5]` -> `palette.neutral[600]` - - "background": - - `palette.common.white` -> `palette.background.default` - - `palette.background.lightGrey` -> `palette.background.alternative` - - `palette.background.lightBlue` -> **removed** - - `palette.background.blue` -> `palette.background.brand` - - `palette.background.navy` -> `palette.background.inverse` - - "text": - - `palette.text.dark` -> `palette.text.(heading|body|icon)` (_use judgement_) - - `palette.text.darkLowContrast` -> `palette.text.(subdued|secondaryIcon)` (_use judgement_) - - `palette.text.light` -> `palette.text.(inverseHeading|inverseBody|inverseIcon)` (_use judgement_) - - `palette.text.lightLowContrast` -> `palette.text.(inverseSubdued|inverseSecondaryIcon)` (_use judgement_) -- **\_\_next\_\_typography** - - Implemented according to PDS v2. - - Preview: `theme.__next__typography.*` - - Descriptive changes from current `typography` (PDS v1): - - Overall, "sizes" like "large", "medium", "small", etc. have been removed. - - "display" - - condensed from 3 to 1 variants: "display". - - "heading" - - term is not reflected in new variant names. - - roughly corresponds to variants with the new "T" prefix (followed by the font size, e.g. "T22"). - - "upppercase" - - term is not reflected in new variant names. - - condensed from 3 to 1 variants: "T14". - - "labels" - - removed. - - "paragraph" - - term is not reflected in new variant names. - - condensed from 4 to 2 variants: "body" and "description". - - "code" - - condensed from 3 to 1 variants: "code". - - Planned migration: - - "display" - - `typography["display-lg"]` -> `typography.display` - - `typography["display-md"]` -> `typography.display` - - `typography["display-sm"]` -> `typography.display` - - "headings" - - `typography["heading-xl"]` -> `typography.T32` - - `typography["heading-lg"]` -> `typography.T28` - - `typography["heading-md"]` -> `typography.T22` - - `typography["heading-sm"]` -> `typography.T18` - - "uppercase" - - `typography["uppercase-lg"]` -> `typography.T14` - - `typography["uppercase-md"]` -> `typography.T14` - - `typography["uppercase-sm"]` -> `typography.T14` - - "labels" - - `typography["label-xl"]` -> **removed** - - `typography["label-xl-strong"]` -> **removed** - - `typography["label-lg"]` -> **removed** - - `typography["label-lg-strong"]` -> **removed** - - `typography["label-md"]` -> **removed** - - `typography["label-md-strong"]` -> **removed** - - `typography["label-sm"]` -> **removed** - - `typography["label-sm-strong"]` -> **removed** - - "paragraph" - - `typography["paragraph-xl"]` -> `typography.body` - - `typography["paragraph-lg"]` -> `typography.body` - - `typography["paragraph-md"]` -> `typography.description` - - `typography["paragraph-sm"]` -> `typography.description` - - "code" - - `typography["code-lg"]` -> `typography.code` - - `typography["code-md"]` -> `typography.code` - - `typography["code-sm"]` -> `typography.code` - -## [v0.16.0](https://github.com/prenda-school/prenda-spark/compare/v0.15.0...v0.16.0) (2021-10-29) - -No changes. - -## [v0.15.0](https://github.com/prenda-school/prenda-spark/compare/v0.14.0...v0.15.0) (2021-10-25) - -### Fixes - -- Fixes peer dependency on `@material-ui/lab` to a base version that actually exists. -- **SvgIcon** - - Widened `ref` type to `any`. - -### Features - -- **Step** - - Re-exported. - - Customized styling. -- **StepButton** - - Initial implementation. -- **StepConnector** - - Initial implementation. -- **StepContent** - - Re-exported. - - Customized styling. -- **StepIcon** - - Initial implementation. -- **StepLabel** - - Re-exported. - - Customized styling. -- **Stepper** - - Re-exported. - - Customized styling. -- **SvgIcon** - - New prop: `lowContrast`. When given, decreases opacity of the component. - - New default `fontSize` prop value, `"inherit"`; eliminates the need to use `fontSize="inherit"` when inside supported components. - - Improved fill color for duotone icons when `color=("light" | "white")`. -- **Typography** - - New prop: `lowContrast`. When given, applies the "low contrast" version of the current `color` -- currently defined for use with `color="light"` and `color="dark"`. -- **makeStyles** - - Supplies custom theme by default; no longer needs context of `SparkThemeProvider`. -- **styled** - - Supplies custom theme by default; no longer needs context of `SparkThemeProvider`. -- **withStyles** - - Supplies custom theme by default; no longer needs context of `SparkThemeProvider`. - -### Breaking - -- **Avatar** - - Removed CSS API rule names: `labelSizeLarge`, `labelSizeMedium`. - - Migration: use `$sizeLarge &`, `$sizeMedium &` respectively under the `label` rule. -- **SvgIcon** - - When using `SvgIcon` either outside of supported components or on its own, instances that have no `fontSize` given will now inherit (likely `16px`) instead of being `24px` by default. - - Migration: - - No `fontSize` given to `fontSize="medium"`. - - Removed `contrast` prop. - - Migration: - - Remove `contrast="high"`, it is default. - - `contrast="low"` to `lowContrast`. - - Removed `color` prop values: `onDark`, `onLight`. - - Migration: - - `color="onDark"` to `color="light"`. - - `color="onLight"` to `color="dark"`. -- **Tag** - - Removed CSS API rule names: - - `boldColorRed`, `boldColorOrange`, `boldColorYellow`, `boldColorGreen`, `boldColorBlue`, `boldColorPurple`. - - Migration: use `&$bold` under each `colorRed`, ... rule, respectively. - - `labelColorRed`, `labelColorOrange`, `labelColorYellow`, `labelColorGreen`, `labelColorBlue`, `labelColorPurple`. - - Migration: use `$colorRed &`, ..., respectively, under the `label` rule. - - `labelBold` - - Migration: use `$bold &` under the `label` rule. - - `labelBoldColorRed`, `labelBoldColorOrange`, `labelBoldColorYellow`, `labelBoldColorGreen`, `labelBoldColorBlue`, `labelBoldColorPurple`. - - Migration: use `$bold$colorRed &`, ..., respectively, under the `label` rule. - - `deleteIconColorRed`, `deleteIconColorOrange`, `deleteIconColorYellow`, `deleteIconColorGreen`, `deleteIconColorBlue`, `deleteIconColorPurple`. - - Migration: use `$colorRed &`, ..., respectively, under the `deleteIcon` rule. - - `deleteIconBold`. - - Migration: use `$bold &` under the `deleteIcon` rule. - - `deleteIconBoldColorRed`, `deleteIconBoldColorOrange`, `deleteIconBoldColorYellow`, `deleteIconBoldColorGreen`, `deleteIconBoldColorBlue`, `deleteIconBoldColorPurple` - - Migration: use `$bold$colorRed &`, ..., respectively, under the `deleteIcon` rule. -- **Typography** - - Removed `color` prop values: `onDark`, `onDarkLowContrast`, `onLight`, `onLightLowContrast`. - - Migration: - - `color="onDark"` to `color="light"` - - `color="onDarkLowContrast"` to `color="light" lowContrast` - - `color="onLight"` to `color="dark"` - - `color="onLightLowContrast"` to `color="dark" lowContrast` - - Changed default value of `color` prop to `"inherit"`. -- **theme** - - New `theme.palette.text` properties reference the color itself rather than its background: `dark`, `darkLowContrast`, `light`, `lightLowContrast` - - Migration: - - `palette.text.onLight` to `palette.text.dark` - - `palette.text.onLightLowContrast` to `palette.text.darkLowContrast` - - `palette.text.onDark` to `palette.text.light` - - `palette.text.onDarkLowContrast` to `palette.text.lightLowContrast` - -## [v0.14.0](https://github.com/prenda-school/prenda-spark/compare/v0.13.1...v0.14.0) (2021-10-04) - -### Fixes - -- Styles no longer rely on fully-deterministic global Mui class names. - - Example: When two `ThemeProvider`'s are used, `'MuiSvgIcon-root'` would change to `'MuiSvgIcon-root-10'`. To address this, selectors like `'& .MuiSvgIcon-root'` were changed to `'& [class*=MuiSvgIcon-root]'`. - - Affected components: **Avatar**, **Button**, **Checkbox**, **FormHelperText**, **FormLabel**, **IconButton**, **InputAdornment**, **InputBase**, **ListItemIcon**, **Menu**, **NavBarButton**, **Pagination**, **Radio**, **Switch**, **Tag**. - -### Features - -- **Collapse** - - Re-exported. -- **CssBaseline** - - Re-exported. -- **Grid** - - Re-exported. -- **ScopedCssBaseline** - - Re-exported. -- **Skeleton** - - Re-exported. -- **styled** - - Re-exported typing (**Styled**). -- **ThemeProvider** - - Re-exported. -- **useMediaQuery** - - Re-exported. -- **withStyles** - - Re-exported typing (**WithStyles**). -- **theme** - - Re-exported typing (**Theme**). - -## [v0.13.1](https://github.com/prenda-school/prenda-spark/compare/v0.13.0...v0.13.1) (2021-10-01) - -### Fixes - -- Support import transform for `theme` from named at top-level to default at second-level. -- **SectionMessage** - - Ensure `React` is in scope for component file. - -## [v0.13.0](https://github.com/prenda-school/prenda-spark/compare/v0.12.0...v0.13.0) (2021-09-30) - -### Features - -- Support deeper file imports - - example: `import Avatar from '@prenda/spark/Avatar';` - -## [v0.12.0](https://github.com/prenda-school/prenda-spark/compare/v0.11.1...v0.12.0) (2021-09-28) - -### Features - -- **Banner** - - Initial implementation. -- **DropdownAnchor** - - Initial implementation. Abstraction of removed **DropdownButton**. - - Supports the `component` prop where **Button** is supplied by default, but any element with an `onClick` event can be used (e.g. **IconButton**). -- **DropdownMenu** - - Add `placement` prop. - - `'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'` -- **IconButton** - - Forwards ref. -- **List** - - Re-exported. - - Customized styling. -- **ListItemSecondaryAction** - - Re-exported. - - Customized styling. -- **SectionMessage** - - Initial implementation. -- **SectionMessageTitle** - - Initial implementation. -- **Switch** - - Initial implementation. -- **Tab** - - Re-exported. - - Customized styling. -- **TabContext** - - Re-exported. -- **TabList** - - Re-exported. -- **TabPanel** - - Re-exported. - - Customized styling. -- **Tabs** - - Re-exported. - - Customized default props and styling. - -### Fixes - -- **DropdownButton** (removed, but carries to new **DropdownAnchor**) - - Don't swallow `onClick` if passed. -- **DropdownMenu** - - Don't swallow `onClick` if passed. - - Vertical offset of Paper from anchor when appearing below anchor. -- **IconButton** - - Custom classes not being global or part of classes signature. -- **InputBase** - - Improve default text contrast. -- **Select** - - Vertical offset of Menu Paper from input field. - -### Breaking Changes - -- **DropdownButton** - - Removed. - - Migration: use **DropdownAnchor** instead -- **DropdownDivider** - - Removed. - - Migration: use **Divider** instead. -- **DropdownMenuItem** - - Removed. - - Migration: use **MenuItem** instead. - -## [v0.11.1](https://github.com/prenda-school/prenda-spark/compare/v0.11.0...v0.11.1) (2021-09-08) - -### Fixes - -- **theme** - - Replace internal call of `createMuiTheme` (deprecated) with `createTheme`. -- **Avatar** - - Custom classes not being global. -- **Tag** - - Custom classes not being global. -- **Typography** - - Custom classes not being global. - -## [v0.11.0](https://github.com/prenda-school/prenda-spark/compare/v0.10.0...v0.11.0) (2021-08-21) - -### Fixes - -- Re-generated Nunito font files. Added missing Source Code Pro font files. If you copied these files to your project, please replace with new copies. -- Nunito "Semibold" (600 weight) font-face at-rules link to correct `semibold` font file, not `bold`. -- **Button** - - Corrected start/end icon margins. - - Corrected height when `size="small"`. - - Corrected padding for all sizes. -- **Input** - - See **InputBase**. -- **InputBase** - - Corrected height. -- **NavBarButton** - - Corrected height when no start/end icon given. -- **Typography** - - TS interface accepts the `component` prop. - - TS interface specifies all custom and underlying `classes` slots. - - Corrected forwarding of custom and underlying `classes`. - -### Features - -- **Autocomplete** - - Re-exported. - - Added initial styling support: multiple Checkboxes. -- **Avatar** - - Initial implementation. -- **Card** - - Updated elevation (design change). -- **Divider** - - Re-exported. - - Added minimal styling related to **MenuList** styling support. -- **Input** - - See **InputBase**. -- **InputBase** - - Added styling for `startAdornment` and `endAdornment` props. -- **List** - - Re-exported. - - Added minimal styling related to **MenuList** styling support. -- **ListItem** - - Added minimal styling related to **MenuItem** styling support. -- **ListItemAvatar** - - Re-exported. - - Added minimal styling related to **MenuItem** styling support. -- **ListItemIcon** - - Re-exported. - - Added minimal styling related to **MenuItem** styling support. -- **ListItemText** - - Re-exported. - - Added minimal styling related to **MenuItem** styling support. -- **ListSubheader** - - Re-exported. - - Added minimal styling related to **MenuList** styling support. -- **Menu** - - Updated elevation (design change). -- **MenuItem** - - Added styling for pseudo-states: `:hover`, `:focus`, `:active` - - Added styling for content: `ListItemText`, `ListItemIcon`, `ListItemAvatar`, `ListItem` - - Added styling when prop `selected` is `true`. -- **MenuList** - - Re-exported. - - Confirmed styling. -- **Paper** - - Re-exported. - - Added minimal styling related to **MenuList** styling support. -- **Select** - - See **InputBase**. -- **Tag** - - Initial implementation. -- **TextField** - - See **InputBase**. -- **Typography** - - Updated variant font-weights (design change). - - New `color` prop values: - - `'onLight'` - - `'onLightLowContrast'` - - `'onDark'` - - `'onDarkLowContrast'` - - New `variant` prop values: - - `'uppercase-lg'` - - `'uppercase-md'` - - `'uppercase-sm'` - - `'label-xl-strong'` - - `'label-lg-strong'` - - `'label-md-strong'` - - `'label-sm-strong'` - - NOTE: "strong" label styles are NOT meant to replace use of the `` tag. The `` tag has semantic significance that is communicated to assistive technology, whereas the `font-weight` CSS property is _purely_ stylistic. Read more [here on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#usage_notes). -- **theme** - - `theme.typography.pxToRem` is now customized to treat `16px` as the base font size instead of the default `14px`. - - Added custom `theme.typography` keys: - - `theme.typography['display-lg']` - - `theme.typography['display-md']` - - `theme.typography['display-sm']` - - `theme.typography['heading-xl']` - - `theme.typography['heading-lg']` - - `theme.typography['heading-md']` - - `theme.typography['heading-sm']` - - `theme.typography['uppercase-lg']` - - `theme.typography['uppercase-md']` - - `theme.typography['uppercase-sm']` - - `theme.typography['label-xl']` - - `theme.typography['label-xl-strong']` - - `theme.typography['label-lg']` - - `theme.typography['label-lg-strong']` - - `theme.typography['label-md']` - - `theme.typography['label-md-strong']` - - `theme.typography['label-sm']` - - `theme.typography['label-sm-strong']` - - `theme.typography['paragraph-xl']` - - `theme.typography['paragraph-lg']` - - `theme.typography['paragraph-md']` - - `theme.typography['paragraph-sm']` - - `theme.typography['code-lg']` - - `theme.typography['code-md']` - - `theme.typography['code-sm']` - - Customized default `theme.typography` keys: - - `theme.typography.h1` as `theme.typography['display-md']` - - `theme.typography.h2` as `theme.typography['display-sm']` - - `theme.typography.h3` as `theme.typography['heading-xl']` - - `theme.typography.h4` as `theme.typography['heading-lg']` - - `theme.typography.h5` as `theme.typography['heading-md']` - - `theme.typography.h6` as `theme.typography['heading-sm']` - - `theme.typography.subtitle1` as `theme.typography['label-lg']` - - `theme.typography.subtitle2` as `theme.typography['label-md']` - - `theme.typography.body1` as `theme.typography['paragraph-lg']` - - `theme.typography.body2` as `theme.typography['paragraph-md']` - - `theme.typography.button` as `theme.typography['label-lg']` - - `theme.typography.caption` as `theme.typography['label-sm']` - - `theme.typography.overline` as `theme.typography['uppercase-sm']` - - Updated `theme.shadows` (design change). - - Design specifies five elevations (shadows): E100, E200, ..., E500. These correspond to `theme.shadows[1...5]`, respectively. The remaining keys (6...24) are equal to the highest elevation, E500 (`theme.shadows[5]`). - -#### Breaking Changes - -- **MenuItem** - - Eliminated custom wrapper. - - Removed support for `startIcon` prop. - - _Migration:_ use `ListItemIcon` component as first child. -- **Typography** - - Removed variant prop values: `'smallcaps-lg'`, `'smallcaps-md'`, `'smallcaps-sm'`. - - _Migration:_ use `'uppercase-lg'`, `'uppercase-md'`, `'uppercase-sm'`, respectively. - - Removed color prop values: `'textOnLight'`, `'textOnLightLowContrast'`, `'textOnDark'`, `'textOnDarkLowContrast'`. - - _Migration:_ use `'onLight'`, `'onLightLowContrast'`, `'onDark'`, `'onDarkLowContrast'`, respectively. -- Styles using `font-weight: 600` will appear lighter than previously. - - _Migration:_ use `font-weight: 700`. - - Affected components: `FormControlLabel`, `MenuItem`, `Typography`. - -## [0.10.0](https://github.com/prenda-school/prenda-spark/compare/v0.9.0...v0.10.0) (2021-08-06) - -### Bug Fixes - -- Build issue (v0.9) ([#178](https://github.com/prenda-school/prenda-spark/issues/178)) ([ae86e4b](https://github.com/prenda-school/prenda-spark/commit/ae86e4b3224374f640a28f9122a7c732b91a2a59)) - -#### Breaking Changes - -Spark no longer exports all of `@material-ui/core`, only components it themes, in addition to re-exporting the following theme related utilities from Mui core: `{ styled, useTheme, withStyles, makeStyles }` - -## [0.9.0](https://github.com/prenda-school/prenda-spark/compare/v0.8.0...v0.9.0) (2021-07-29) - -### Bug Fixes - -- warning "disabled class isn't defined for MenuItem" ([#163](https://github.com/prenda-school/prenda-spark/issues/163)) ([49809fa](https://github.com/prenda-school/prenda-spark/commit/49809fa60bf1ab35775a692fe1885545bd005c17)) -- overriding global body font-size ([#79](https://github.com/prenda-school/prenda-spark/issues/79)) ([6dd30df](https://github.com/prenda-school/prenda-spark/commit/6dd30dfc340ade8114f5285a430ec5b9ff9fb7c2)) -- overlapping class name generation with consumers ([#171](https://github.com/prenda-school/prenda-spark/issues/171)) ([2ac5768](https://github.com/prenda-school/prenda-spark/commit/2ac57688c648bd3eeda75c5e5d54f14eb13eeab1)) - -### Features - -#### Breaking Changes - -All icons added in v0.8.0 were removed. They are now located under `@prenda/spark-icons` under new names and with a new prop signature. They should be treated as completely new. See that project's changelog for details. - -All illustrations and logos were removed. They are now located under `@prenda/spark-icons` with a new prop signature. They should be treated as completely new. - -Many components faced breaking prop API changes (and theme-wide default props) and breaking styling changes (through theme-wide style overrides). Theme-wide overrides or default will affect all MUI components under `SparkThemeProvider` regardless of if they are imported from Spark. - -- **Button:** - - Prop: `variant` - - `"solid"` is now `"contained"` - - `"flat"` is now `"text"` - - (`"outlined"` was not changed) -- **Checkbox:** - - Is no longer a meld of `FormControlLabel` and `Checkbox` - - Please treat this component as completely new. -- **IconButton:** - - Prop: `variant` - - `"solid"` is now `"contained"` - - `"flat"` is now `"text"` - - (`"outlined"` was not changed) -- **Navbar:** - - Renamed to **NavBar**. -- **NabarLink:** - - Replaced by **NavBarButton** (treat as completely new). -- **Radio:** - - Is no longer a meld of `FormControlLabel` and `Radio` - - Please treat this component as completely new. - -#### All - -- simplify dependency narrative ([#169](https://github.com/prenda-school/prenda-spark/issues/169)) ([9936891](https://github.com/prenda-school/prenda-spark/commit/99368918c86ef8f9fa67139e4a3c2701cda02ec5)) -- **Button:** update styles ([#158](https://github.com/prenda-school/prenda-spark/issues/158)) ([d914340](https://github.com/prenda-school/prenda-spark/commit/d914340561167e1f5da7dfc2480496d33a4c0194)), ([#142](https://github.com/prenda-school/prenda-spark/issues/142)) ([aa2aacc](https://github.com/prenda-school/prenda-spark/commit/aa2aaccbe3fb879f30ecc1828f875c5ffd54cc0f)) -- **ButtonBase:** add theme default props ([#98](https://github.com/prenda-school/prenda-spark/issues/98)) ([6761097](https://github.com/prenda-school/prenda-spark/commit/6761097329d36ca564d9ab2b34f15123811f4ec6)) -- **Card:** add theme style overrides ([#71](https://github.com/prenda-school/prenda-spark/issues/71)) ([85068ec](https://github.com/prenda-school/prenda-spark/commit/85068ec14bad64c8251d47be482b12d85474dcb8)) -- **CardActions:** add theme style overrides ([#71](https://github.com/prenda-school/prenda-spark/issues/71)) ([85068ec](https://github.com/prenda-school/prenda-spark/commit/85068ec14bad64c8251d47be482b12d85474dcb8)) -- **CardContent:** add theme style overrides ([#71](https://github.com/prenda-school/prenda-spark/issues/71)) ([85068ec](https://github.com/prenda-school/prenda-spark/commit/85068ec14bad64c8251d47be482b12d85474dcb8)) -- **Checkbox:** - - add theme style overrides and default props ([#83](https://github.com/prenda-school/prenda-spark/issues/83)) ([8a9430f](https://github.com/prenda-school/prenda-spark/commit/8a9430fedbd39f03c1702f10bc42b9371be47622)) - - update styles ([#114](https://github.com/prenda-school/prenda-spark/issues/114)) ([61c2699](https://github.com/prenda-school/prenda-spark/commit/61c269989c2e81638c6d1b954f366ba5179d3cc5)) - - add indeterminate support ([#114](https://github.com/prenda-school/prenda-spark/issues/114)) ([61c2699](https://github.com/prenda-school/prenda-spark/commit/61c269989c2e81638c6d1b954f366ba5179d3cc5)) -- **CheckboxGroup:** initial implementation (\*\*not a component, just a pattern) ([#116](https://github.com/prenda-school/prenda-spark/issues/116)) ([3812dbd](https://github.com/prenda-school/prenda-spark/commit/3812dbd2fd2661a4589ab69a676136fd5e98979d)) -- **FormControlLabel:** add theme style overrides ([#80](https://github.com/prenda-school/prenda-spark/issues/80)) ([0e1f8fe](https://github.com/prenda-school/prenda-spark/commit/0e1f8fecb98ba43fdb892441de47b70462dcccb4)) -- **FormHelperText:** add theme style overrides ([#91](https://github.com/prenda-school/prenda-spark/issues/91)) ([c9e16ce](https://github.com/prenda-school/prenda-spark/commit/c9e16ceb7911bcef872b2a08cab6dc8f5e32ac54)) -- **IconButton:** update styles ([#143](https://github.com/prenda-school/prenda-spark/issues/143)) ([c771cdb](https://github.com/prenda-school/prenda-spark/commit/c771cdb5fc1727e8ee316b8f0c8613520c73061a)) -- **Input:** add theme style overrides and default props ([#93](https://github.com/prenda-school/prenda-spark/issues/93)) ([bb26eb7](https://github.com/prenda-school/prenda-spark/commit/bb26eb72dc3b7476ebb7424d4ad9346d1ea6b51f)) -- **Input:** update default styles ([#88](https://github.com/prenda-school/prenda-spark/issues/88)) ([8963fcf](https://github.com/prenda-school/prenda-spark/commit/8963fcff3d8965e4a758dd874312869ccbed0535)) -- **InputLabel:** add theme style overrides ([#92](https://github.com/prenda-school/prenda-spark/issues/92)) ([892aca5](https://github.com/prenda-school/prenda-spark/commit/892aca5cbc3a0dd8ead5062f8cc20de8cbc6aa43)) -- **Menu:** add theme style overrides and default props ([#97](https://github.com/prenda-school/prenda-spark/issues/97)) ([e6aa00b](https://github.com/prenda-school/prenda-spark/commit/e6aa00ba900c528e503cf00b3de026856de8bb58)) -- **MenuItem:** update component styles and add theme style overrides ([#99](https://github.com/prenda-school/prenda-spark/issues/99)) ([faf6b4c](https://github.com/prenda-school/prenda-spark/commit/faf6b4c3f45bf69ec191c9f380400aa72d282b92)) -- **NavBar:** renamed Navbar; remove forced composition ([#125](https://github.com/prenda-school/prenda-spark/issues/125)) ([faf6b4c](https://github.com/prenda-school/prenda-spark/commit/0d18582f4d3f1bd4d09cc211ef3cba2456f6949e)) -- **NavBarButton:** renamed NavbarLink; improved styles and API ([#166](https://github.com/prenda-school/prenda-spark/issues/166)) ([faf6b4c](https://github.com/prenda-school/prenda-spark/commit/2045814943169d41a362dfcd099094d45a0f9db8)) -- **Pagination:** initial implementation ([#110](https://github.com/prenda-school/prenda-spark/issues/110)) ([4955311](https://github.com/prenda-school/prenda-spark/commit/4955311291a7559afbe49e19d929c65038cb58b7)) -- **PaginationItem:** initial implementation ([#110](https://github.com/prenda-school/prenda-spark/issues/110)) ([4955311](https://github.com/prenda-school/prenda-spark/commit/4955311291a7559afbe49e19d929c65038cb58b7)) -- **palette:** - - initial isolated implementation (simplifies names) ([#104](https://github.com/prenda-school/prenda-spark/issues/104)) ([8148eed](https://github.com/prenda-school/prenda-spark/commit/8148eedea61273b145c7f92c7030a5fd6b310ad8)) - - move greys under grey; remove whites, navy, neutrals ([#105](https://github.com/prenda-school/prenda-spark/issues/105)) ([fa51a60](https://github.com/prenda-school/prenda-spark/commit/fa51a60b8a2944df5902ae4a4363cb06970c420a)) - - add new `grey.lighter` color ([#87](https://github.com/prenda-school/prenda-spark/issues/87)) ([d4ddb79](https://github.com/prenda-school/prenda-spark/commit/d4ddb7936c0204a10725024f7c57f1e31552c1f9)) -- **Radio:** - - add theme style overrides and default props ([#82](https://github.com/prenda-school/prenda-spark/issues/82)) ([5654dc4](https://github.com/prenda-school/prenda-spark/commit/5654dc4ac2b34d4f87950cf0c520f31f3102ecf0)) - - update styles ([#113](https://github.com/prenda-school/prenda-spark/issues/113)) ([390abc5](https://github.com/prenda-school/prenda-spark/commit/390abc5a84b220e965b6de6e434d445fa93ccf91)) -- **RadioGroup:** initial implementation ([#115](https://github.com/prenda-school/prenda-spark/issues/115)) ([aa7756b](https://github.com/prenda-school/prenda-spark/commit/aa7756bd905b2455607fe612969f9b34c7d33839)) -- **Select:** initial implementation ([#124](https://github.com/prenda-school/prenda-spark/issues/124)) ([8120dad](https://github.com/prenda-school/prenda-spark/commit/8120dad4d0a3f3762a73eb86026949b97aecb556)) -- **SvgIcon:** - - add theme style overrides and default props ([#94](https://github.com/prenda-school/prenda-spark/issues/94)) ([a8143cf](https://github.com/prenda-school/prenda-spark/commit/a8143cf4c8767f1768b10f219e345d927ca1fb53)) - - make default color 'inherit'; use in @prenda/spark-icons; expand colors; improve props ([#174](https://github.com/prenda-school/prenda-spark/issues/174)) ([777213a](https://github.com/prenda-school/prenda-spark/commit/777213a143c87f6fc4762a70d065ac16cf501a10)) -- **TextField:** add theme-level style overrides ([#153](https://github.com/prenda-school/prenda-spark/issues/153)) ([d2220dd](https://github.com/prenda-school/prenda-spark/commit/d2220ddef00bfd19c4e6e1f0e766d660592e37c1)) - -## [0.8.0](https://github.com/prenda-school/prenda-spark/compare/v0.7.3...v0.8.0) (2021-06-22) - -### Features - -- **Card:** initial implementation, theme style overrides ([#71](https://github.com/prenda-school/prenda-spark/issues/71)) ([85068ec](https://github.com/prenda-school/prenda-spark/commit/85068ec14bad64c8251d47be482b12d85474dcb8)) -- **CardContent:** initial implementation, theme style overrides ([#71](https://github.com/prenda-school/prenda-spark/issues/71)) ([85068ec](https://github.com/prenda-school/prenda-spark/commit/85068ec14bad64c8251d47be482b12d85474dcb8)) -- **CardActions:** initial implementation, theme style overrides ([#71](https://github.com/prenda-school/prenda-spark/issues/71)) ([85068ec](https://github.com/prenda-school/prenda-spark/commit/85068ec14bad64c8251d47be482b12d85474dcb8)) -- **theme:** custom shadows ([#71](https://github.com/prenda-school/prenda-spark/issues/71)) ([85068ec](https://github.com/prenda-school/prenda-spark/commit/85068ec14bad64c8251d47be482b12d85474dcb8)) - -## [0.7.3](https://github.com/prenda-school/prenda-spark/compare/spark-0.7.2...spark-0.7.3) (2021-06-16) - -- **Navbar:** initial implementation ([#64](https://github.com/prenda-school/prenda-spark/issues/64)) ([8af41e3](https://github.com/prenda-school/prenda-spark/commit/8af41e35ac52fa59c6bb07f6c618995744f77887)) - -## [0.7.2](https://github.com/prenda-school/prenda-spark/compare/spark-0.7.1...spark-0.7.2) (2021-05-29) - -- initial commit for changelog.md diff --git a/libs/spark/LICENSE b/libs/spark/LICENSE deleted file mode 100644 index 39c0326a8..000000000 --- a/libs/spark/LICENSE +++ /dev/null @@ -1,5 +0,0 @@ -Unlicensed - -Copyright (c) 2021 Prenda, Inc. - -All rights reserved diff --git a/libs/spark/README.md b/libs/spark/README.md deleted file mode 100644 index acc897902..000000000 --- a/libs/spark/README.md +++ /dev/null @@ -1,71 +0,0 @@ -# @prenda/spark - -## Prenda Spark - -- [Documentation](#documentation) -- [Development](#development) -- [Testing](#testing) -- [WIP and TODOS](#wip-and-todos) -- [Install](#install) -- [Usage](#usage) - ---- - -## Documentation - -> Official Docs: https://prenda-school.github.io/prenda-documentation/ - -Prenda Spark extends Material UI react components (https://v4.mui.com/) by overriding select styles to match the Prenda Design System philosophy. - -## Development - -### Set Up - -1. Clone the repository. -2. Ensure you have Node Version Manager installed on your system ([see instructions](https://github.com/nvm-sh/nvm#installing-and-updating)). -3. Run `nvm use` to ensure specified node version is used. -4. Run `npm ci` to install dependencies. -5. Ensure you have [Nx](https://nx.dev) installed on your system (`npm i -g nx`) ([see more](https://nx.dev/latest/react/tutorial/01-create-application#note-on-the-nx-cli)), or if this is not possible, you can use `npx nx` instead of `nx` in the commands in this document. - -### Usage - -Run `nx run spark:storybook` to run the spark project in develop mode (open `http://localhost:4400/` in your default browser to view.) - -Now you can develop components within the `libs/spark/src/` directory and see changes update in realtime. - -Depending on your preferred IDE, consider downloading a [community IDE plugin for Nx workspaces](https://nx.dev/latest/react/getting-started/console#download). - -The Spark theme refers to font files for _Nunito_, which should be served at the `/fonts` path. These fonts are available in this library in `libs/spark/public/fonts`. - -## Testing - -Run tests with `nx run spark:test`. -Spark uses Jest tests with React Testing Library. - -## WIP and TODOS - -- Please see the Asana board for all current WIP and TODOS https://app.asana.com/share/prenda/spark-v1-release-wip-and-todos/995455616843969/2480fe89c9ef452f98b70ba4d981caa9 - -## Install - -```bash -npm install --save @prenda/spark -``` - -## Usage - -```tsx -import React from 'react'; - -import { Button } from '@prenda/spark'; - -const App = () => { - return ( - <> - - - ); -}; - -export default App; -``` diff --git a/libs/spark/jest.config.js b/libs/spark/jest.config.js deleted file mode 100644 index 3ba0d65a6..000000000 --- a/libs/spark/jest.config.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - displayName: 'spark', - preset: '../../jest.preset.js', - transform: { - '^.+\\.[tj]sx?$': 'babel-jest', - }, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], - coverageDirectory: '../../coverage/libs/spark', - /** - * Enable `@testing-library/jest-dom` matchers. - * - * @see https://jestjs.io/docs/configuration#setupfilesafterenv-array - */ - setupFilesAfterEnv: ['/jest.setup.ts'], -}; diff --git a/libs/spark/jest.setup.ts b/libs/spark/jest.setup.ts deleted file mode 100644 index 19583ed88..000000000 --- a/libs/spark/jest.setup.ts +++ /dev/null @@ -1,4 +0,0 @@ -/** - * Enable `@testing-library/jest-dom` matchers such as `toHaveStyle` or `toHaveAttribute`. - */ -import '@testing-library/jest-dom'; diff --git a/libs/spark/package.json b/libs/spark/package.json deleted file mode 100644 index 90303187b..000000000 --- a/libs/spark/package.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "@prenda/spark", - "version": "2.0.0-alpha.18", - "author": "Prenda, Inc.", - "license": "UNLICENSED", - "publishConfig": { - "access": "public", - "registry": "https://registry.npmjs.org/" - }, - "sideEffects": false, - "dependencies": { - "clsx": "^1.1.1", - "notistack": "^3.0.0-alpha.11" - }, - "peerDependencies": { - "@material-ui/core": "^4.0.0", - "@material-ui/lab": "^4.0.0-alpha.60", - "@types/react": "^16.8.6 || ^17.0.0", - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } -} diff --git a/libs/spark/src/Alert/Alert.tsx b/libs/spark/src/Alert/Alert.tsx deleted file mode 100644 index f545a2e5d..000000000 --- a/libs/spark/src/Alert/Alert.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/lab/Alert'; -export type { - /** @deprecated */ - AlertClassKey, - /** @deprecated */ - AlertProps, - /** @deprecated */ - Color, -} from '@material-ui/lab/Alert'; diff --git a/libs/spark/src/Alert/defaults.tsx b/libs/spark/src/Alert/defaults.tsx deleted file mode 100644 index f40dd437e..000000000 --- a/libs/spark/src/Alert/defaults.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import type { AlertProps } from './Alert'; -import { - AlertOctagonFilled, - AlertTriangleFilled, - CheckCircleFilled, - InfoFilled, -} from '../internal'; - -export const MuiAlertDefaultProps: Partial = { - iconMapping: { - error: , - info: , - success: , - warning: , - }, -}; diff --git a/libs/spark/src/Alert/index.ts b/libs/spark/src/Alert/index.ts deleted file mode 100644 index f8bf7e6b6..000000000 --- a/libs/spark/src/Alert/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Alert'; -export * from './Alert'; diff --git a/libs/spark/src/AlertTitle/AlertTitle.ts b/libs/spark/src/AlertTitle/AlertTitle.ts deleted file mode 100644 index 878710e4b..000000000 --- a/libs/spark/src/AlertTitle/AlertTitle.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/lab/AlertTitle'; -export type { - /** @deprecated */ - AlertTitleClassKey, - /** @deprecated */ - AlertTitleProps, -} from '@material-ui/lab/AlertTitle'; diff --git a/libs/spark/src/AlertTitle/index.ts b/libs/spark/src/AlertTitle/index.ts deleted file mode 100644 index 92625eccb..000000000 --- a/libs/spark/src/AlertTitle/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './AlertTitle'; -export * from './AlertTitle'; diff --git a/libs/spark/src/Autocomplete/Autocomplete.tsx b/libs/spark/src/Autocomplete/Autocomplete.tsx deleted file mode 100644 index e5420225c..000000000 --- a/libs/spark/src/Autocomplete/Autocomplete.tsx +++ /dev/null @@ -1,30 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/lab/Autocomplete'; -export { - /** @deprecated */ - createFilterOptions, -} from '@material-ui/lab/Autocomplete'; -export type { - /** @deprecated */ - AutocompleteChangeDetails, - /** @deprecated */ - AutocompleteChangeReason, - /** @deprecated */ - AutocompleteClassKey, - /** @deprecated */ - AutocompleteCloseReason, - /** @deprecated */ - AutocompleteGetTagProps, - /** @deprecated */ - AutocompleteInputChangeReason, - /** @deprecated */ - AutocompleteProps, - /** @deprecated */ - AutocompleteRenderGroupParams, - /** @deprecated */ - AutocompleteRenderInputParams, - /** @deprecated */ - AutocompleteRenderOptionState, -} from '@material-ui/lab/Autocomplete'; diff --git a/libs/spark/src/Autocomplete/defaults.tsx b/libs/spark/src/Autocomplete/defaults.tsx deleted file mode 100644 index 0eb770fc2..000000000 --- a/libs/spark/src/Autocomplete/defaults.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import type { AutocompleteClassKey } from './Autocomplete'; -import { ChevronDown } from '../internal'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiAutocompleteStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - input: { - padding: '10px 16px', - }, - inputRoot: { - backgroundColor: palette.common.white, - '&[class*="MuiInput-root"]': { - paddingBottom: 0, - '& $input': { - padding: '10px 8px', - }, - '& $input:first-child': { - padding: '10px 16px', - }, - }, - '&[class*="MuiInputBase-adornedStart"]': { - paddingLeft: 8, - }, - '&[class*="MuiInputBase-adornedEnd"]': { - paddingRight: 42, - }, - }, - endAdornment: { - right: 16, - }, - popupIndicator: { - transition: 'transform 250ms ease', - }, - // largely a copy of MenuItem's style overrides - option: { - ...typography['label-lg'], - boxSizing: 'border-box' as const, - color: palette.text.dark, - minWidth: 228, - minHeight: '2.125rem', // 34px - border: '2px solid transparent', - // have to separate to override - paddingTop: 4, - paddingBottom: 4, - paddingRight: 14, - paddingLeft: 14, - margin: 0, - '&:first-child': { - marginTop: 0, - }, - '&:last-child': { - marginBottom: 0, - }, - // won't receive true hover or focus, just data-focus - '&[data-focus="true"]': { - backgroundColor: palette.grey.light, - borderColor: palette.grey.light, - }, - '&:active': { - backgroundColor: palette.grey.medium, - borderColor: palette.blue[4], - }, - - '&[aria-selected="true"][data-focus="true"]': { - backgroundColor: palette.blue[3], - borderColor: palette.blue[3], - color: palette.common.white, - }, - // won't receive true focus - '&[aria-selected="true"]:active': { - backgroundColor: palette.blue[4], - borderColor: palette.blue[5], - color: palette.common.white, - }, - }, -}); - -// can't type because AutocompleteProps requires 4 generics we don't want to specify -export const MuiAutocompleteDefaultProps = { - popupIcon: , -}; diff --git a/libs/spark/src/Autocomplete/index.ts b/libs/spark/src/Autocomplete/index.ts deleted file mode 100644 index f153149a7..000000000 --- a/libs/spark/src/Autocomplete/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Autocomplete'; -export * from './Autocomplete'; diff --git a/libs/spark/src/Avatar/Avatar.tsx b/libs/spark/src/Avatar/Avatar.tsx deleted file mode 100644 index d3eafeb77..000000000 --- a/libs/spark/src/Avatar/Avatar.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { - AvatarClassKey as MuiAvatarClassKey, - AvatarProps as MuiAvatarProps, -} from '@material-ui/core/Avatar'; -import { default as MuiAvatar } from '@material-ui/core/Avatar'; -import makeStyles from '../makeStyles'; -import type { OverridableComponent, OverrideProps } from '../utils'; -import { capitalize, useClassesCapture } from '../utils'; - -/** @deprecated */ -export type AvatarClassKey = MuiAvatarClassKey | CustomClassKey; - -type CustomClassKey = - // from underlying - | 'root' - | 'colorDefault' - // custom - | 'sizeLarge' - | 'sizeMedium' - | 'sizeSmall' - | 'sizeXsmall'; - -/** @deprecated */ -export interface AvatarTypeMap< - P = Record, - D extends ElementType = 'div' -> { - props: P & - Omit & { - /** - * The size of the avatar. - */ - size?: 'large' | 'medium' | 'small' | 'xsmall'; - }; - defaultComponent: D; - classKey: AvatarClassKey; -} - -/** @deprecated */ -export type AvatarProps< - D extends ElementType = AvatarTypeMap['defaultComponent'], - P = Record -> = OverrideProps, D>; - -const useCustomStyles = makeStyles( - ({ palette, typography }) => ({ - root: { - border: `2px solid ${palette.grey.medium}`, - }, - colorDefault: { - backgroundColor: palette.common.white, - color: palette.text.dark, - '& [class*=MuiSvgIcon-root]': { - color: palette.text.darkLowContrast, - }, - }, - sizeLarge: { - ...typography['heading-lg'], - width: 80, - height: 80, - '& [class*=MuiSvgIcon-root]': { - fontSize: typography.pxToRem(40), - }, - }, - sizeMedium: { - ...typography['heading-md'], - width: 56, - height: 56, - '& [class*=MuiSvgIcon-root]': { - fontSize: typography.pxToRem(28), - }, - }, - sizeSmall: { - ...typography['label-md'], - fontWeight: 700, - width: 32, - height: 32, - '& [class*=MuiSvgIcon-root]': { - fontSize: typography.pxToRem(16), - }, - }, - sizeXsmall: { - width: 24, - height: 24, - fontSize: typography.pxToRem(8), - lineHeight: 1.5, - fontWeight: 700, - '& [class*=MuiSvgIcon-root]': { - fontSize: typography.pxToRem(12), - }, - }, - }), - { name: 'MuiSparkAvatar' } -); - -/** @deprecated */ -const Avatar: OverridableComponent = forwardRef(function Avatar( - { classes, size = 'medium', ...other }, - ref -) { - const baseCustomClasses = useCustomStyles(); - - const { otherClasses, customClasses } = useClassesCapture< - AvatarClassKey, - CustomClassKey - >({ - classes, - baseCustomClasses, - }); - - return ( - - ); -}); - -export default Avatar; diff --git a/libs/spark/src/Avatar/index.ts b/libs/spark/src/Avatar/index.ts deleted file mode 100644 index 0f9f50f3c..000000000 --- a/libs/spark/src/Avatar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Avatar'; -export * from './Avatar'; diff --git a/libs/spark/src/Banner/Banner.tsx b/libs/spark/src/Banner/Banner.tsx deleted file mode 100644 index 3107008a3..000000000 --- a/libs/spark/src/Banner/Banner.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import type { CSSProperties, SyntheticEvent } from 'react'; -import React from 'react'; -import type { AlertProps, AlertClassKey } from '../Alert'; -import { default as Alert } from '../Alert'; -import Button from '../Button'; -import IconButton from '../IconButton'; -import { ArrowRight, Cross } from '../internal'; -import withStyles from '../withStyles'; - -/** @deprecated */ -export interface BannerProps extends Omit { - /** - * Override the default label for the *details popup* button. - */ - detailsText?: string; - /** - * Callback fired when the component requests to go to details. - * When provided and no `action` prop is set, a details button is displayed that triggers the callback when clicked. - * - * @param {object} event The event source of the callback. - */ - onDetails?: (event: SyntheticEvent) => void; -} - -/** @deprecated */ -export type BannerClassKey = AlertClassKey; - -const CustomIconButton = withStyles((theme) => ({ - root: { - color: 'inherit', - padding: 4, - '&:active, &:focus-visible, &.Mui-focusVisible': { - color: theme.palette.text.dark, - }, - }, -}))(IconButton); - -const CustomButton = withStyles((theme) => ({ - root: { - borderColor: 'transparent', - padding: 4, - '&:active, &:focus-visible, &.Mui-focusVisible': { - color: theme.palette.text.dark, - }, - }, -}))(Button); - -const actionMapping = { - Close: ({ closeText, onClose }) => ( - - - - ), - Details: ({ detailsText = 'Details', onDetails }) => ( - } - > - {detailsText} - - ), -}; - -/** @deprecated */ -export default withStyles( - (theme) => ({ - root: { - borderRadius: 0, - padding: '15px 24px', - }, - filledInfo: { - backgroundColor: theme.palette.blue[2], - }, - filledSuccess: { - backgroundColor: theme.palette.green[2], - }, - filledWarning: { - backgroundColor: theme.palette.yellow[2], - color: theme.palette.text.dark, - }, - filledError: { - backgroundColor: theme.palette.red[2], - }, - icon: { - fontSize: theme.typography.pxToRem(24), - opacity: 1, - marginRight: 8, - }, - message: { - ...(theme.typography['label-lg-strong'] as CSSProperties), - padding: '9px 0', - }, - }), - { - name: 'MuiSparkBanner', - } -)(({ onClose, closeText, onDetails, detailsText, ...other }: BannerProps) => { - let Action = null; - if (onClose) { - Action = () => ( - - ); - } else if (onDetails) { - Action = () => ( - - ); - } - - return ( - : null} {...other} variant="filled" /> - ); -}); diff --git a/libs/spark/src/Banner/index.ts b/libs/spark/src/Banner/index.ts deleted file mode 100644 index 72cc4b874..000000000 --- a/libs/spark/src/Banner/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Banner'; -export * from './Banner'; diff --git a/libs/spark/src/Box/Box.ts b/libs/spark/src/Box/Box.ts deleted file mode 100644 index c4b1c0a95..000000000 --- a/libs/spark/src/Box/Box.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/core/Box'; -export * from '@material-ui/core/Box'; diff --git a/libs/spark/src/Box/index.ts b/libs/spark/src/Box/index.ts deleted file mode 100644 index 38ce2fc4f..000000000 --- a/libs/spark/src/Box/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Box'; -export * from './Box'; diff --git a/libs/spark/src/Breadcrumbs/Breadcrumbs.tsx b/libs/spark/src/Breadcrumbs/Breadcrumbs.tsx deleted file mode 100644 index acd8df73a..000000000 --- a/libs/spark/src/Breadcrumbs/Breadcrumbs.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { forwardRef } from 'react'; -import type { - BreadcrumbsClassKey, - BreadcrumbsProps, - BreadcrumbsTypeMap, -} from '@material-ui/core/Breadcrumbs'; -import { default as MuiBreadcrumbs } from '@material-ui/core/Breadcrumbs'; -import makeStyles from '../makeStyles'; -import type { OverridableComponent } from '../utils'; -import { useMergeClasses } from '../utils'; -import { ChevronRight } from '../internal'; - -export type { - /** @deprecated */ - BreadcrumbsClassKey, - /** @deprecated */ - BreadcrumbsProps, - /** @deprecated */ - BreadcrumbsTypeMap, -}; - -const useStyles = makeStyles( - ({ palette }) => ({ - root: {}, - ol: {}, - li: { - '& [class*=MuiSparkLink-root]': { - fontWeight: 700, - textDecoration: 'none', - '&[aria-current="page"]': { - color: palette.text.dark, - '&:hover, &:focus-visible, &.Mui-focusVisible': { - color: palette.blue[3], - }, - }, - }, - }, - separator: { - color: palette.text.darkLowContrast, - fontSize: 24, - marginLeft: 16, - marginRight: 16, - }, - }), - { name: 'MuiSparkBreadcrumbs' } -); - -/** @deprecated use `alpha/Breadcrumbs` */ -const Breadcrumbs: OverridableComponent = forwardRef( - function Breadcrumbs( - { classes: classesProp, separator = , ...other }, - ref - ) { - const baseClasses = useStyles(); - - const classes = useMergeClasses({ baseClasses, classesProp }); - - return ( - - ); - } -); - -export default Breadcrumbs; diff --git a/libs/spark/src/Breadcrumbs/index.ts b/libs/spark/src/Breadcrumbs/index.ts deleted file mode 100644 index d447c988b..000000000 --- a/libs/spark/src/Breadcrumbs/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Breadcrumbs'; -export * from './Breadcrumbs'; diff --git a/libs/spark/src/Button/Button.ts b/libs/spark/src/Button/Button.ts deleted file mode 100644 index e36a1c6b4..000000000 --- a/libs/spark/src/Button/Button.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/Button'; -export type { - /** @deprecated */ - ButtonClassKey, - /** @deprecated */ - ButtonProps, - /** @deprecated */ - ButtonTypeMap, -} from '@material-ui/core/Button'; diff --git a/libs/spark/src/Button/defaults.ts b/libs/spark/src/Button/defaults.ts deleted file mode 100644 index 072e5c171..000000000 --- a/libs/spark/src/Button/defaults.ts +++ /dev/null @@ -1,159 +0,0 @@ -import type { ButtonClassKey, ButtonProps } from './Button'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiButtonDefaultProps: Partial = { - // No disableElevation: true because it makes styling box-shadow's - // VERY difficult. Instead, just override wherever it pops up. - disableFocusRipple: true, - disableRipple: true, - variant: 'contained' as const, - size: 'large' as const, -}; - -export const MuiButtonStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - ...typography['label-lg-strong'], - // account for 2px border width - padding: `${typography.pxToRem(6 - 2)} ${typography.pxToRem(16 - 2)}`, - borderRadius: 24, - borderWidth: '2px', - borderStyle: 'solid' as const, - '&$disabled': { - opacity: '50%', - }, - }, - contained: { - boxShadow: 'none', - border: `2px solid ${palette.blue[3]}`, - backgroundColor: palette.blue[3], - color: palette.common.white, - '&$disabled': { - border: `2px solid ${palette.blue[3]}`, - backgroundColor: palette.blue[3], - color: palette.common.white, - }, - '&:hover': { - boxShadow: 'none', - borderColor: palette.blue[4], - backgroundColor: palette.blue[4], - }, - '&.Mui-focusVisible, &:focus-visible': { - boxShadow: `0 0 0 4px ${palette.blue[1]}`, - }, - '&:active': { - boxShadow: 'none', - borderColor: palette.blue[5], - }, - }, - outlined: { - boxShadow: 'none', - // re-declare to override default - border: `2px solid ${palette.grey.medium}`, - backgroundColor: palette.common.white, - color: palette.blue[3], - // re-declare to override default - padding: `${typography.pxToRem(6 - 2)} ${typography.pxToRem(16 - 2)}`, - '&$disabled': { - border: `2px solid ${palette.grey.medium}`, - backgroundColor: palette.common.white, - color: palette.blue[3], - }, - '&:hover': { - boxShadow: 'none', - backgroundColor: palette.grey.light, - }, - '&.Mui-focusVisible, &:focus-visible': { - boxShadow: `0 0 0 4px ${palette.blue[1]}`, - }, - '&:active': { - boxShadow: 'none', - borderColor: palette.blue[5], - }, - }, - text: { - boxShadow: 'none', - border: '2px solid transparent', - backgroundColor: 'transparent', - color: palette.blue[3], - // re-declare to override default - padding: `${typography.pxToRem(6 - 2)} ${typography.pxToRem(16 - 2)}`, - '&$disabled': { - border: '2px solid transparent', - backgroundColor: 'transparent', - color: palette.blue[3], - }, - '&:hover': { - boxShadow: 'none', - color: palette.blue[4], - backgroundColor: 'transparent', - }, - '&.Mui-focusVisible, &:focus-visible': { - boxShadow: `0 0 0 4px ${palette.blue[1]}`, - borderColor: palette.blue[3], - backgroundColor: palette.blue[1], - }, - '&:active': { - boxShadow: 'none', - color: palette.blue[4], - }, - }, - sizeLarge: { - ...typography['label-xl-strong'], - // account for 2px border width - padding: `${typography.pxToRem(14 - 2)} ${typography.pxToRem(16 - 2)}`, - }, - sizeSmall: { - ...typography['label-sm-strong'], - // account for 2px border width - padding: `${typography.pxToRem(2 - 2)} ${typography.pxToRem(16 - 2)}`, - }, - label: { - color: 'inherit', - fontSize: 'inherit', - lineHeight: 'inherit', - }, - startIcon: { - display: 'inherit', - // -2px accounts for label vs icon size difference - // have to specify individually to override defaults - marginTop: '-2px', - marginBottom: '-2px', - marginRight: '8px', - marginLeft: 0, - color: 'inherit', - // artificially increase specificity to win battle with default - '&& > :first-child': { - fontSize: 'inherit', - }, - }, - endIcon: { - display: 'inherit', - // -2px accounts for label vs icon size difference - // have to specify individually to override defaults - marginTop: '-2px', - marginBottom: '-2px', - marginLeft: '8px', - marginRight: 0, - color: 'inherit', - // artificially increase specificity to win battle with default - '&& > :first-child': { - fontSize: 'inherit', - }, - }, - iconSizeSmall: { - fontSize: typography.pxToRem(16), - lineHeight: typography.pxToRem(16), - }, - iconSizeMedium: { - fontSize: typography.pxToRem(20), - lineHeight: typography.pxToRem(20), - }, - iconSizeLarge: { - fontSize: typography.pxToRem(24), - lineHeight: typography.pxToRem(24), - }, -}); diff --git a/libs/spark/src/Button/index.ts b/libs/spark/src/Button/index.ts deleted file mode 100644 index d5d566838..000000000 --- a/libs/spark/src/Button/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Button'; -export * from './Button'; diff --git a/libs/spark/src/ButtonBase/ButtonBase.ts b/libs/spark/src/ButtonBase/ButtonBase.ts deleted file mode 100644 index b4a72e293..000000000 --- a/libs/spark/src/ButtonBase/ButtonBase.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/core/ButtonBase'; -export * from '@material-ui/core/ButtonBase'; diff --git a/libs/spark/src/ButtonBase/defaults.ts b/libs/spark/src/ButtonBase/defaults.ts deleted file mode 100644 index c617134b3..000000000 --- a/libs/spark/src/ButtonBase/defaults.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { ButtonBaseProps } from './ButtonBase'; - -export const MuiButtonBaseDefaultProps: Partial = { - disableRipple: true, - disableTouchRipple: true, - focusRipple: false, -}; diff --git a/libs/spark/src/ButtonBase/index.ts b/libs/spark/src/ButtonBase/index.ts deleted file mode 100644 index be890af74..000000000 --- a/libs/spark/src/ButtonBase/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ButtonBase'; -export * from './ButtonBase'; diff --git a/libs/spark/src/Card/Card.tsx b/libs/spark/src/Card/Card.tsx deleted file mode 100644 index a1dcb2076..000000000 --- a/libs/spark/src/Card/Card.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/Card'; -export type { - /** @deprecated */ - CardClassKey, - /** @deprecated */ - CardProps, -} from '@material-ui/core/Card'; diff --git a/libs/spark/src/Card/defaults.ts b/libs/spark/src/Card/defaults.ts deleted file mode 100644 index fb5d5d385..000000000 --- a/libs/spark/src/Card/defaults.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { CardClassKey, CardProps } from './Card'; -import type { StyleRules } from '../withStyles'; - -export const MuiCardDefaultProps: Partial = { - elevation: 2, // E200 -}; - -export const MuiCardStyleOverrides: Partial> = { - root: { - borderRadius: 16, - }, -}; diff --git a/libs/spark/src/Card/index.ts b/libs/spark/src/Card/index.ts deleted file mode 100644 index 83385cbeb..000000000 --- a/libs/spark/src/Card/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Card'; -export * from './Card'; diff --git a/libs/spark/src/CardActions/CardActions.ts b/libs/spark/src/CardActions/CardActions.ts deleted file mode 100644 index 285ec553b..000000000 --- a/libs/spark/src/CardActions/CardActions.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/core/CardActions'; -export * from '@material-ui/core/CardActions'; diff --git a/libs/spark/src/CardActions/defaults.ts b/libs/spark/src/CardActions/defaults.ts deleted file mode 100644 index 23755bb36..000000000 --- a/libs/spark/src/CardActions/defaults.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { CardActionsClassKey } from './CardActions'; -import type { StyleRules } from '../withStyles'; - -export const MuiCardActionsStyleOverrides: Partial< - StyleRules -> = { - root: { - padding: 24, - justifyContent: 'flex-end', - }, -}; diff --git a/libs/spark/src/CardActions/index.ts b/libs/spark/src/CardActions/index.ts deleted file mode 100644 index e477b43a1..000000000 --- a/libs/spark/src/CardActions/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './CardActions'; -export * from './CardActions'; diff --git a/libs/spark/src/CardContent/CardContent.ts b/libs/spark/src/CardContent/CardContent.ts deleted file mode 100644 index e20f9c30b..000000000 --- a/libs/spark/src/CardContent/CardContent.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/core/CardContent'; -export * from '@material-ui/core/CardContent'; diff --git a/libs/spark/src/CardContent/defaults.ts b/libs/spark/src/CardContent/defaults.ts deleted file mode 100644 index db582f16b..000000000 --- a/libs/spark/src/CardContent/defaults.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { CardContentClassKey } from './CardContent'; -import type { StyleRules } from '../withStyles'; - -export const MuiCardContentStyleOverrides: Partial< - StyleRules -> = { - root: { - padding: '24px 24px 0', - }, -}; diff --git a/libs/spark/src/CardContent/index.ts b/libs/spark/src/CardContent/index.ts deleted file mode 100644 index a217109e6..000000000 --- a/libs/spark/src/CardContent/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './CardContent'; -export * from './CardContent'; diff --git a/libs/spark/src/CardMedia/CardMedia.ts b/libs/spark/src/CardMedia/CardMedia.ts deleted file mode 100644 index d9fb90199..000000000 --- a/libs/spark/src/CardMedia/CardMedia.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/core/CardMedia'; -export * from '@material-ui/core/CardMedia'; diff --git a/libs/spark/src/CardMedia/index.ts b/libs/spark/src/CardMedia/index.ts deleted file mode 100644 index e01400dab..000000000 --- a/libs/spark/src/CardMedia/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './CardMedia'; -export * from './CardMedia'; diff --git a/libs/spark/src/Checkbox/Checkbox.spec.tsx b/libs/spark/src/Checkbox/Checkbox.spec.tsx deleted file mode 100644 index a01686a77..000000000 --- a/libs/spark/src/Checkbox/Checkbox.spec.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import Checkbox from './Checkbox'; -import SparkThemeProvider from '../SparkThemeProvider'; - -describe('', () => { - describe('props.checked', () => { - it('should appear "unchecked" when `false`', () => { - const { getByTestId } = render( - - - - ); - - expect(getByTestId('CheckboxBoxIcon')).toBeTruthy(); - expect(getByTestId('CheckboxCheckIcon')).toHaveStyle( - 'transform: scale(0)' - ); - expect(getByTestId('CheckboxDashIcon')).toHaveStyle( - 'transform: scale(0)' - ); - }); - - it('should appear "checked" when `true`', () => { - const { getByTestId } = render( - - - - ); - - expect(getByTestId('CheckboxBoxIcon')).toBeTruthy(); - expect(getByTestId('CheckboxCheckIcon')).toHaveStyle( - 'transform: scale(1)' - ); - expect(getByTestId('CheckboxDashIcon')).toHaveStyle( - 'transform: scale(0)' - ); - }); - }); - - describe('props.indeterminate', () => { - it('should appear "indeterminate" when `true`', () => { - const { getByTestId } = render( - - - - ); - - expect(getByTestId('CheckboxBoxIcon')).toBeTruthy(); - expect(getByTestId('CheckboxCheckIcon')).toHaveStyle( - 'transform: scale(0)' - ); - expect(getByTestId('CheckboxDashIcon')).toHaveStyle( - 'transform: scale(1)' - ); - }); - }); -}); diff --git a/libs/spark/src/Checkbox/Checkbox.tsx b/libs/spark/src/Checkbox/Checkbox.tsx deleted file mode 100644 index 84c4b587f..000000000 --- a/libs/spark/src/Checkbox/Checkbox.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/Checkbox'; -export type { - /** @deprecated */ - CheckboxClassKey, - /** @deprecated */ - CheckboxProps, -} from '@material-ui/core/Checkbox'; diff --git a/libs/spark/src/Checkbox/CheckboxIcon.tsx b/libs/spark/src/Checkbox/CheckboxIcon.tsx deleted file mode 100644 index c7b0393d7..000000000 --- a/libs/spark/src/Checkbox/CheckboxIcon.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styled from '../styled'; -import { createSvgIcon } from '../utils'; - -// Recreation of MUI's internal RadioButton component, but -// with our icons(bit larger at 22x22, no empty border space) -const CheckboxIconRoot = styled('span')( - ({ theme: { palette, transitions } }) => ({ - '&.CheckboxIcon-root': { - position: 'relative' as const, - display: 'flex', - borderRadius: 2, - // Adjust for irregular svg size of checkbox icons - height: 22, - width: 22, - '& [class*=MuiSvgIcon-root]': { - width: 22, - height: 22, - }, - '&:hover, input:hover ~ &, label:hover &': { - color: palette.text.dark, - }, - '&:focus-visible, input:focus-visible ~ &': { - boxShadow: `0 0 0 4px ${palette.blue[1]}`, - '&:not(.CheckboxIcon-checked):not(.CheckboxIcon-indeterminate) .CheckboxIcon-box': - { - color: palette.blue[3], - backgroundColor: palette.common.white, - }, - }, - }, - '&.CheckboxIcon-checked': { - '& .CheckboxIcon-check': { - transform: 'scale(1)', - color: palette.common.white, - transition: transitions.create('transform', { - easing: transitions.easing.easeOut, - duration: transitions.duration.shortest, - }), - }, - '& .CheckboxIcon-box': { - backgroundColor: palette.blue[3], - }, - }, - '&.CheckboxIcon-indeterminate': { - '& .CheckboxIcon-dash': { - transform: 'scale(1)', - color: palette.common.white, - transition: transitions.create('transform', { - easing: transitions.easing.easeOut, - duration: transitions.duration.shortest, - }), - }, - '& .CheckboxIcon-box': { - backgroundColor: palette.blue[3], - }, - }, - '& .CheckboxIcon-box': { - borderRadius: 2, - // from Mui, scale applied to prevent dot misalignment in Safari - transform: 'scale(1)', - }, - '& .CheckboxIcon-check, & .CheckboxIcon-dash': { - color: palette.blue[1], - backgroundColor: 'transparent', - position: 'absolute' as const, - left: 0, - transform: 'scale(0)', - transition: transitions.create('transform', { - easing: transitions.easing.easeIn, - duration: transitions.duration.shortest, - }), - }, - }) -); - -const CheckboxBox = createSvgIcon( - , - 'CheckboxBox', - '0 0 22 22' -); - -const CheckboxCheck = createSvgIcon( - , - 'CheckboxCheck', - '0 0 22 22' -); - -const CheckboxDash = createSvgIcon( - , - 'CheckboxDash', - '0 0 22 22' -); - -export default function CheckboxIcon({ - checked, - indeterminate, -}: { - checked?: boolean; - indeterminate?: boolean; -}) { - return ( - - - - - - ); -} diff --git a/libs/spark/src/Checkbox/defaults.tsx b/libs/spark/src/Checkbox/defaults.tsx deleted file mode 100644 index e470e7f5e..000000000 --- a/libs/spark/src/Checkbox/defaults.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import type { CheckboxProps, CheckboxClassKey } from './Checkbox'; -import CheckboxIcon from './CheckboxIcon'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiCheckboxDefaultProps: Partial = { - color: 'default' as const, - icon: , - checkedIcon: , - indeterminateIcon: , -}; - -export const MuiCheckboxStyleOverrides = ({ - palette, -}: Theme): Partial> => ({ - root: { - padding: 8, - backgroundColor: 'unset', - color: palette.grey.dark, - '&:hover': { - color: palette.text.dark, - backgroundColor: 'unset', - }, - '&$checked': { - color: palette.blue[3], - }, - '&$disabled': { - '& .CheckboxIcon-root': { - color: palette.grey.dark, - '& .CheckboxIcon-box': { - backgroundColor: palette.grey.medium, - }, - '& .CheckboxIcon-check, & .CheckboxIcon-dash': { - color: palette.grey[400], - }, - }, - }, - }, - indeterminate: { - color: palette.blue[3], - }, -}); diff --git a/libs/spark/src/Checkbox/index.ts b/libs/spark/src/Checkbox/index.ts deleted file mode 100644 index b077973e2..000000000 --- a/libs/spark/src/Checkbox/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Checkbox'; -export * from './Checkbox'; diff --git a/libs/spark/src/CircularProgress_unstable/index.ts b/libs/spark/src/CircularProgress_unstable/index.ts deleted file mode 100644 index c6f92e6bd..000000000 --- a/libs/spark/src/CircularProgress_unstable/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated use `/alpha/CircularProgress` */ - default, -} from '../alpha/CircularProgress'; -export type { - /** @deprecated */ - CircularProgressClassKey as CircularProgressClassKey_unstable, - /** @deprecated */ - CircularProgressProps as CircularProgressProps_unstable, -} from '../alpha/CircularProgress'; diff --git a/libs/spark/src/Collapse/Collapse.tsx b/libs/spark/src/Collapse/Collapse.tsx deleted file mode 100644 index fa629cca3..000000000 --- a/libs/spark/src/Collapse/Collapse.tsx +++ /dev/null @@ -1,369 +0,0 @@ -// Adapted from MUI, from the last source before the emotion migration. Permalink https://github.com/mui-org/material-ui/blob/fe6a7db45959dcd5650f917db0d5a452548e191b/packages/material-ui/src/Collapse/Collapse.js -import React, { forwardRef, useEffect, useRef } from 'react'; -import clsx from 'clsx'; -import PropTypes from 'prop-types'; -import { Transition } from 'react-transition-group'; -import type { CollapseProps as MuiCollapseProps } from '@material-ui/core/Collapse'; -import { getTransitionProps } from '@material-ui/core/transitions/utils'; -import { useForkRef } from '@material-ui/core/utils'; -import makeStyles from '../makeStyles'; -import useTheme from '../useTheme'; -import { useMergeClasses } from '../utils'; - -export interface CollapseProps extends MuiCollapseProps { - /** - * The transition orientation. - * @default 'vertical' - */ - orientation?: 'horizontal' | 'vertical'; -} - -export type CollapseClassKey = - | 'root' - | 'horizontal' - | 'entered' - | 'hidden' - | 'wrapper' - | 'wrapperInner'; - -export const useStyles = makeStyles( - (theme) => ({ - /* Styles applied to the root element. */ - root: { - height: 0, - overflow: 'hidden', - transition: theme.transitions.create('height'), - '&$horizontal': { - height: 'auto', - width: 0, - transition: theme.transitions.create(['width', 'max-width']), - }, - }, - /* Pseudo-class applied to the root element if `orientation="horizontal"`. */ - horizontal: {}, - /* Styles applied to the root element when the transition has entered. */ - entered: { - height: 'auto', - overflow: 'visible', - '&$horizontal': { - width: 'auto', - }, - }, - /* Styles applied to the root element when the transition has exited and `collapsedSize` != 0px. */ - hidden: { - visibility: 'hidden', - }, - /* Styles applied to the outer wrapper element. */ - wrapper: { - // Hack to get children with a negative margin to not falsify the height computation. - display: 'flex', - width: '100%', - '&$horizontal': { - width: 'auto', - height: '100%', - }, - }, - /* Styles applied to the inner wrapper element. */ - wrapperInner: { - width: '100%', - '&$horizontal': { - // width: 'auto', - width: '100%', - height: '100%', - }, - }, - }), - { name: 'MuiSparkCollapse' } -); - -const Collapse = forwardRef< - CollapseProps, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - any ->(function Collapse(props, ref) { - const theme = useTheme(); - - const { - children, - classes: classesProp, - className, - collapsedSize: collapsedSizeProp = '0px', - component: Component = 'div', - in: inProp, - onEnter, - onEntered, - onEntering, - onExit, - onExited, - onExiting, - orientation = 'vertical', - style, - timeout = theme.transitions.duration.standard, - // eslint-disable-next-line react/prop-types - TransitionComponent = Transition, - ...other - } = props; - - const baseClasses = useStyles(); - const classes = useMergeClasses({ baseClasses, classesProp }); - - const timer = useRef(); - const wrapperRef = useRef(null); - const autoTransitionDuration = useRef(); - const collapsedSize = - typeof collapsedSizeProp === 'number' - ? `${collapsedSizeProp}px` - : collapsedSizeProp; - const isHorizontal = orientation === 'horizontal'; - const size = isHorizontal ? 'width' : 'height'; - - useEffect(() => { - return () => { - clearTimeout(timer.current); - }; - }, []); - - const nodeRef = useRef(null); - const handleRef = useForkRef(ref, nodeRef); - - const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => { - if (callback) { - const node = nodeRef.current; - - // onEnterXxx and onExitXxx callbacks have a different arguments.length value. - if (maybeIsAppearing === undefined) { - callback(node); - } else { - callback(node, maybeIsAppearing); - } - } - }; - const getWrapperSize = () => - wrapperRef.current - ? wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'] - : 0; - - const handleEnter = normalizedTransitionCallback((node, isAppearing) => { - if (wrapperRef.current) { - // Set absolute position to get the size of collapsed content - wrapperRef.current.style.position = 'absolute'; - } - node.style[size] = collapsedSize; - if (onEnter) { - onEnter(node, isAppearing); - } - }); - - const handleEntering = normalizedTransitionCallback((node, isAppearing) => { - const wrapperSize = getWrapperSize(); - - if (wrapperRef.current) { - // After the size is read reset the position back to default - wrapperRef.current.style.position = ''; - } - - const { duration: transitionDuration } = getTransitionProps( - { style, timeout }, - { - mode: 'enter', - } - ); - - if (timeout === 'auto') { - const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize); - node.style.transitionDuration = `${duration2}ms`; - autoTransitionDuration.current = duration2; - } else { - node.style.transitionDuration = - typeof transitionDuration === 'string' - ? transitionDuration - : `${transitionDuration}ms`; - } - - node.style[size] = `${wrapperSize}px`; - - if (onEntering) { - onEntering(node, isAppearing); - } - }); - - const handleEntered = normalizedTransitionCallback((node, isAppearing) => { - node.style[size] = 'auto'; - - if (onEntered) { - onEntered(node, isAppearing); - } - }); - - const handleExit = normalizedTransitionCallback((node) => { - node.style[size] = `${getWrapperSize()}px`; - - if (onExit) { - onExit(node); - } - }); - - const handleExited = normalizedTransitionCallback(onExited); - - const handleExiting = normalizedTransitionCallback((node) => { - const wrapperSize = getWrapperSize(); - - const { duration: transitionDuration } = getTransitionProps( - { style, timeout }, - { - mode: 'exit', - } - ); - - if (timeout === 'auto') { - const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize); - node.style.transitionDuration = `${duration2}ms`; - autoTransitionDuration.current = duration2; - } else { - node.style.transitionDuration = - typeof transitionDuration === 'string' - ? transitionDuration - : `${transitionDuration}ms`; - } - - node.style[size] = collapsedSize; - - if (onExiting) { - onExiting(node); - } - }); - - const addEndListener = (next) => { - if (timeout === 'auto') { - timer.current = setTimeout(next, autoTransitionDuration.current || 0); - } - }; - - return ( - - {(state, childProps) => ( - -
-
- {children} -
-
- - )} - - ); -}); - -Collapse.propTypes = { - /** - * The content node to be collapsed. - */ - children: PropTypes.node, - /** - * @ignore - */ - className: PropTypes.string, - /** - * The height of the container when collapsed. - */ - collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, - /** - * If `true`, the component will transition in. - */ - in: PropTypes.bool, - /** - * @ignore - */ - onEnter: PropTypes.func, - /** - * @ignore - */ - onEntered: PropTypes.func, - /** - * @ignore - */ - onEntering: PropTypes.func, - /** - * @ignore - */ - onExit: PropTypes.func, - /** - * @ignore - */ - onExited: PropTypes.func, - /** - * @ignore - */ - onExiting: PropTypes.func, - /** - * The collapse transition orientation. - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - /** - * @ignore - */ - style: PropTypes.object, - /** - * The duration for the transition, in milliseconds. - * You may specify a single timeout for all transitions, or individually with an object. - * - * Set to 'auto' to automatically calculate transition time based on height. - */ - timeout: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.number, - PropTypes.shape({ - appear: PropTypes.number, - enter: PropTypes.number, - exit: PropTypes.number, - }), - ]), -}; - -//@ts-expect-error Property 'muiSupportAuto' does not exist on type -Collapse.muiSupportAuto = true; - -export default Collapse; diff --git a/libs/spark/src/Collapse/index.ts b/libs/spark/src/Collapse/index.ts deleted file mode 100644 index 4ea703485..000000000 --- a/libs/spark/src/Collapse/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Collapse'; -export * from './Collapse'; diff --git a/libs/spark/src/CssBaseline/CssBaseline.test.tsx b/libs/spark/src/CssBaseline/CssBaseline.test.tsx deleted file mode 100644 index 989ad6920..000000000 --- a/libs/spark/src/CssBaseline/CssBaseline.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import CssBaseline from './CssBaseline'; - -describe('CssBaseline', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/CssBaseline/CssBaseline.ts b/libs/spark/src/CssBaseline/CssBaseline.ts deleted file mode 100644 index f7952306f..000000000 --- a/libs/spark/src/CssBaseline/CssBaseline.ts +++ /dev/null @@ -1,57 +0,0 @@ -import withStyles from '../withStyles'; - -/** - * Inject a consistent and simple baseline into the global styles. - * - * @deprecated - * @example - * const MyApp = () => ( - * <> - * - * // rest of my app - * - * ) - */ -const CssBaseline = withStyles( - (theme) => ({ - '@global': { - html: { - WebkitFontSmoothing: 'antialiased', - MozOsxFontSmoothing: 'grayscale', - boxSizing: 'border-box', - }, - '*, *::before, *::after': { - boxSizing: 'inherit', - }, - body: { - backgroundColor: theme.palette.background.default, - color: theme.palette.text.dark, - fontFamily: theme.typography.fontFamily, - fontSize: theme.typography.fontSize, - lineHeight: theme.typography['paragraph-md'].lineHeight, - margin: 0, // Remove the margin in all browsers. - '@media print': { - // Save printer ink. - backgroundColor: theme.palette.common.white, - }, - // Add support for document.body.requestFullScreen(). - // Other elements, if background transparent, are not supported. - '&::backdrop': { - backgroundColor: theme.palette.background.default, - }, - }, - '@media (prefers-reduced-motion: reduce)': { - '*': { - animationPlayState: 'paused !important', - transition: 'none !important', - scrollBehavior: 'auto !important', - }, - }, - }, - }), - { - name: 'MuiSparkCssBaseline', - } -)(() => null); - -export default CssBaseline; diff --git a/libs/spark/src/CssBaseline/index.ts b/libs/spark/src/CssBaseline/index.ts deleted file mode 100644 index fbc808d44..000000000 --- a/libs/spark/src/CssBaseline/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CssBaseline'; diff --git a/libs/spark/src/Divider/Divider.ts b/libs/spark/src/Divider/Divider.ts deleted file mode 100644 index 4a5b4c2e9..000000000 --- a/libs/spark/src/Divider/Divider.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/Divider'; -export type { - /** @deprecated */ - DividerClassKey, - /** @deprecated */ - DividerProps, - /** @deprecated */ - DividerTypeMap, -} from '@material-ui/core/Divider'; diff --git a/libs/spark/src/Divider/defaults.ts b/libs/spark/src/Divider/defaults.ts deleted file mode 100644 index 610c59491..000000000 --- a/libs/spark/src/Divider/defaults.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { DividerClassKey } from './Divider'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiDividerStyleOverrides = ({ - palette, -}: Theme): Partial> => ({ - root: { - height: 2, - backgroundColor: palette.grey.medium, - }, -}); diff --git a/libs/spark/src/Divider/index.ts b/libs/spark/src/Divider/index.ts deleted file mode 100644 index f7d6b10e3..000000000 --- a/libs/spark/src/Divider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Divider'; -export * from './Divider'; diff --git a/libs/spark/src/Drawer_unstable/index.ts b/libs/spark/src/Drawer_unstable/index.ts deleted file mode 100644 index 876c18cb2..000000000 --- a/libs/spark/src/Drawer_unstable/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated use `alpha/Drawer` */ - default, -} from '../alpha/Drawer'; -export type { - /** @deprecated */ - DrawerClassKey as DrawerClassKey_unstable, - /** @deprecated */ - DrawerProps as DrawerProps_unstable, -} from '../alpha/Drawer'; diff --git a/libs/spark/src/DropdownAnchor/DropdownAnchor.tsx b/libs/spark/src/DropdownAnchor/DropdownAnchor.tsx deleted file mode 100644 index 64d46a5f6..000000000 --- a/libs/spark/src/DropdownAnchor/DropdownAnchor.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import type { ButtonTypeMap } from '../Button'; -import { default as Button } from '../Button'; -import { useDropdownContext } from '../DropdownContext'; -import type { OverridableComponent, OverrideProps } from '../utils'; -import type { Styles } from '../withStyles'; -import withStyles from '../withStyles'; - -/** @deprecated */ -export type DropdownAnchorProps< - D extends ElementType = DropdownAnchorTypeMap['defaultComponent'], - P = Record -> = OverrideProps, D>; - -/** @deprecated */ -export interface DropdownAnchorTypeMap< - P = Record, - D extends ElementType = ButtonTypeMap['defaultComponent'] -> { - props: P; - defaultComponent: D; - classKey: string; -} - -type PrivateClassKey = - | 'private-button-trailingIcon' - | 'private-button-trailingIcon-open'; - -const styles: Styles = { - 'private-button-trailingIcon': { - transition: 'transform 250ms ease', - }, - 'private-button-trailingIcon-open': { - transform: 'rotate(180deg)', - }, -}; - -/** @deprecated */ -const DropdownAnchor: OverridableComponent = forwardRef( - function DropdownAnchor( - { classes, component = Button, onClick, ...other }: DropdownAnchorProps, - ref - ) { - const { id, openDropdown } = useDropdownContext(); - - const Component = component as ElementType; - - const { - 'private-button-trailingIcon': privateButtonTrailingIconClass, - 'private-button-trailingIcon-open': privateButtonTrailingIconOpenClass, - ...otherClasses - } = classes; - - return ( - { - onClick?.(event); - openDropdown(event); - }} - ref={ref} - {...other} - /> - ); - } -); - -/** @deprecated */ -export default withStyles(styles, { name: 'MuiSparkDropdownAnchor' })( - DropdownAnchor -) as typeof DropdownAnchor; diff --git a/libs/spark/src/DropdownAnchor/index.ts b/libs/spark/src/DropdownAnchor/index.ts deleted file mode 100644 index 7142813d1..000000000 --- a/libs/spark/src/DropdownAnchor/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './DropdownAnchor'; -export * from './DropdownAnchor'; diff --git a/libs/spark/src/DropdownContext/DropdownContext.spec.tsx b/libs/spark/src/DropdownContext/DropdownContext.spec.tsx deleted file mode 100644 index 5a1204625..000000000 --- a/libs/spark/src/DropdownContext/DropdownContext.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import DropdownContext from './DropdownContext'; - -describe('DropdownContext', () => { - it('is truthy', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/DropdownContext/DropdownContext.tsx b/libs/spark/src/DropdownContext/DropdownContext.tsx deleted file mode 100644 index 9f7b29a43..000000000 --- a/libs/spark/src/DropdownContext/DropdownContext.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import type { MouseEvent, ReactNode } from 'react'; -import React, { createContext, useContext, useMemo, useState } from 'react'; -import { useUniqueId } from '../utils'; - -// This file is an adaption of Mui's TabContext. -// See https://github.com/mui-org/material-ui/blob/cd8aeb64a9038ae9cb8ecf1cd7fd8a2bfea2d6b6/packages/material-ui-lab/src/TabContext/TabContext.js - -/** @deprecated */ -export interface DropdownContextValue { - id: string; - anchorEl: null | HTMLElement; - openDropdown: (event: MouseEvent) => void; - closeDropdown: () => void; - isOpen: boolean; -} - -const Context = createContext(null); - -if (process.env.NODE_ENV !== 'production') { - Context.displayName = 'DropdownContext'; -} - -/** @deprecated */ -export interface DropdownContextProps { - /** - * The content of the component. - */ - children?: ReactNode; -} - -/** @deprecated */ -export default function DropdownContext( - props: DropdownContextProps -): JSX.Element { - const id = useUniqueId(); - - const [anchorEl, setAnchorEl] = useState(null); - - const openDropdown = (event: MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - - const closeDropdown = () => { - setAnchorEl(null); - }; - - const value = useMemo( - () => ({ id, anchorEl, isOpen: !!anchorEl, openDropdown, closeDropdown }), - [id, anchorEl] - ); - - return ; -} - -/** @deprecated */ -export function useDropdownContext(): DropdownContextValue | null { - return useContext(Context); -} diff --git a/libs/spark/src/DropdownContext/index.ts b/libs/spark/src/DropdownContext/index.ts deleted file mode 100644 index e729c4d20..000000000 --- a/libs/spark/src/DropdownContext/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './DropdownContext'; -export * from './DropdownContext'; diff --git a/libs/spark/src/DropdownMenu/DropdownMenu.test.tsx b/libs/spark/src/DropdownMenu/DropdownMenu.test.tsx deleted file mode 100644 index 405af0425..000000000 --- a/libs/spark/src/DropdownMenu/DropdownMenu.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import DropdownContext from '../DropdownContext'; -import DropdownMenu from './DropdownMenu'; - -describe('DropdownMenu', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/DropdownMenu/DropdownMenu.tsx b/libs/spark/src/DropdownMenu/DropdownMenu.tsx deleted file mode 100644 index 8a0b21ee9..000000000 --- a/libs/spark/src/DropdownMenu/DropdownMenu.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import type { PopoverProps } from '@material-ui/core/Popover'; -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import { useDropdownContext } from '../DropdownContext'; -import type { MenuProps } from '../Menu'; -import Menu from '../Menu'; -import type { OverridableComponent, OverrideProps } from '../utils'; -import type { Styles } from '../withStyles'; -import withStyles from '../withStyles'; - -type Placement = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'; - -/** @deprecated */ -export interface DropdownMenuTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = typeof Menu -> { - props: P & { - // possible props of override component that are deconstructed - onClose?: PopoverProps['onClose']; - PaperProps?: { - className?: string; - }; - } & { - /** - * If `true`, the menu is visible. - */ - open?: boolean | undefined; - /** - * The placement of the menu `Popover` in relation to its anchor. - * This is a shortcut for common combinations of `anchorOrigin` and `transformOrigin`. - */ - placement?: Placement; - }; - defaultComponent: D; - classKey: never; -} - -/** @deprecated */ -export type DropdownMenuProps< - D extends ElementType = DropdownMenuTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -type Origins = Pick; - -function getOrigins(placement: Placement): Origins { - let anchorOrigin; - let transformOrigin; - - if (placement === 'bottom-left') { - anchorOrigin = { vertical: 'bottom', horizontal: 'left' }; - transformOrigin = { vertical: 'top', horizontal: 'left' }; - } else if (placement === 'bottom-right') { - anchorOrigin = { vertical: 'bottom', horizontal: 'right' }; - transformOrigin = { vertical: 'top', horizontal: 'right' }; - } else if (placement === 'top-left') { - anchorOrigin = { vertical: 'top', horizontal: 'left' }; - transformOrigin = { vertical: 'bottom', horizontal: 'left' }; - } else if (placement === 'top-right') { - anchorOrigin = { vertical: 'top', horizontal: 'right' }; - transformOrigin = { vertical: 'bottom', horizontal: 'right' }; - } - - return { anchorOrigin, transformOrigin }; -} - -type PrivateClassKey = - | 'private-paper-placement-bottom-left' - | 'private-paper-placement-bottom-right' - | 'private-paper-placement-top-left' - | 'private-paper-placement-top-right'; - -// since the menu is absolutely positioning by top & left, then position adjustments are made through top & left margin changes -const styles: Styles = { - 'private-paper-placement-bottom-left': { - marginTop: 8, - }, - 'private-paper-placement-bottom-right': { - marginTop: 8, - }, - 'private-paper-placement-top-left': { - marginTop: -8, - }, - 'private-paper-placement-top-right': { - marginTop: -8, - }, -}; - -/** @deprecated */ -const DropdownMenu: OverridableComponent = forwardRef( - function DropdownMenu(props, ref) { - const { - classes, - // @ts-expect-error TS can't recognize component prop - component = Menu, - placement = 'bottom-left', - onClose, - PaperProps, - anchorOrigin, - transformOrigin, - ...other - } = props as DropdownMenuProps; - - const Component = component as ElementType; - - const { id, anchorEl, closeDropdown } = useDropdownContext(); - - const origins = getOrigins(placement); - - return ( - { - onClose?.(event, reason); - closeDropdown(); - }} - open={!!anchorEl} - ref={ref} - PaperProps={{ - ...PaperProps, - className: clsx( - classes[`private-paper-placement-${placement}`], - PaperProps?.className - ), - }} - {...origins} - {...other} - /> - ); - } -); - -/** @deprecated */ -export default withStyles(styles, { - name: 'MuiSparkDropdownMenu', -})(DropdownMenu) as typeof DropdownMenu; diff --git a/libs/spark/src/DropdownMenu/index.ts b/libs/spark/src/DropdownMenu/index.ts deleted file mode 100644 index ba59313c9..000000000 --- a/libs/spark/src/DropdownMenu/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './DropdownMenu'; -export * from './DropdownMenu'; diff --git a/libs/spark/src/FontFacesBaseline/FontFacesBaseline.test.tsx b/libs/spark/src/FontFacesBaseline/FontFacesBaseline.test.tsx deleted file mode 100644 index fe4e8ba37..000000000 --- a/libs/spark/src/FontFacesBaseline/FontFacesBaseline.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import FontFacesBaseline from './FontFacesBaseline'; - -describe('FontFacesBaseline', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/FontFacesBaseline/FontFacesBaseline.ts b/libs/spark/src/FontFacesBaseline/FontFacesBaseline.ts deleted file mode 100644 index 1d3a45d0d..000000000 --- a/libs/spark/src/FontFacesBaseline/FontFacesBaseline.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type * as CSS from 'csstype'; -import fontFaces from '../theme/fontFaces'; -import withStyles from '../withStyles'; - -/** - * Inject necessary `@font-face` declarations into the global styles. - * - * @deprecated - * @example - * const MyApp = () => ( - * <> - * - * // rest of my app - * - * ) - */ -const FontFacesBaseline = withStyles( - { - '@global': { - // cast to avoid error when invoked () from bad typing of `@font-face` key. - '@font-face': fontFaces as CSS.AtRule.FontFace, - }, - }, - { name: 'MuiSparkFontFacesBaseline' } -)(() => null); - -export default FontFacesBaseline; diff --git a/libs/spark/src/FontFacesBaseline/index.ts b/libs/spark/src/FontFacesBaseline/index.ts deleted file mode 100644 index 65b33cf61..000000000 --- a/libs/spark/src/FontFacesBaseline/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './FontFacesBaseline'; diff --git a/libs/spark/src/FormControl/FormControl.ts b/libs/spark/src/FormControl/FormControl.ts deleted file mode 100644 index 5b7e6cb69..000000000 --- a/libs/spark/src/FormControl/FormControl.ts +++ /dev/null @@ -1,14 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/FormControl'; -export type { - /** @deprecated */ - FormControlClassKey, - /** @deprecated */ - FormControlProps, - /** @deprecated */ - FormControlState, - /** @deprecated */ - FormControlTypeMap, -} from '@material-ui/core/FormControl'; diff --git a/libs/spark/src/FormControl/index.ts b/libs/spark/src/FormControl/index.ts deleted file mode 100644 index c934d0b58..000000000 --- a/libs/spark/src/FormControl/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './FormControl'; -export * from './FormControl'; diff --git a/libs/spark/src/FormControlLabel/FormControlLabel.ts b/libs/spark/src/FormControlLabel/FormControlLabel.ts deleted file mode 100644 index 252df238a..000000000 --- a/libs/spark/src/FormControlLabel/FormControlLabel.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/FormControlLabel'; -export type { - /** @deprecated */ - FormControlLabelClassKey, - /** @deprecated */ - FormControlLabelProps, -} from '@material-ui/core/FormControlLabel'; diff --git a/libs/spark/src/FormControlLabel/defaults.ts b/libs/spark/src/FormControlLabel/defaults.ts deleted file mode 100644 index e1a37e69a..000000000 --- a/libs/spark/src/FormControlLabel/defaults.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { FormControlLabelClassKey } from './FormControlLabel'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiFormControlLabelStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - marginLeft: -8, - color: palette.text.darkLowContrast, - height: 40, - marginTop: 1, - marginBottom: 1, - '&:hover, &:focus-visible': { - color: palette.text.dark, - }, - '&$disabled': { - color: palette.grey.dark, - }, - }, - label: typography['label-lg'], -}); diff --git a/libs/spark/src/FormControlLabel/index.ts b/libs/spark/src/FormControlLabel/index.ts deleted file mode 100644 index a68fc5ec5..000000000 --- a/libs/spark/src/FormControlLabel/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './FormControlLabel'; -export * from './FormControlLabel'; diff --git a/libs/spark/src/FormGroup/FormGroup.ts b/libs/spark/src/FormGroup/FormGroup.ts deleted file mode 100644 index dbea3eaf3..000000000 --- a/libs/spark/src/FormGroup/FormGroup.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/FormGroup'; -export type { - /** @deprecated */ - FormGroupClassKey, - /** @deprecated */ - FormGroupProps, -} from '@material-ui/core/FormGroup'; diff --git a/libs/spark/src/FormGroup/index.ts b/libs/spark/src/FormGroup/index.ts deleted file mode 100644 index 0457f7dd5..000000000 --- a/libs/spark/src/FormGroup/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './FormGroup'; -export * from './FormGroup'; diff --git a/libs/spark/src/FormHelperText/FormHelperText.ts b/libs/spark/src/FormHelperText/FormHelperText.ts deleted file mode 100644 index 56248d890..000000000 --- a/libs/spark/src/FormHelperText/FormHelperText.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/FormHelperText'; -export type { - /** @deprecated */ - FormHelperTextClassKey, - /** @deprecated */ - FormHelperTextProps, - /** @deprecated */ - FormHelperTextTypeMap, -} from '@material-ui/core/FormHelperText'; diff --git a/libs/spark/src/FormHelperText/defaults.ts b/libs/spark/src/FormHelperText/defaults.ts deleted file mode 100644 index 63aa7d1ae..000000000 --- a/libs/spark/src/FormHelperText/defaults.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { FormHelperTextClassKey } from './FormHelperText'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiFormHelperTextStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - color: palette.text.darkLowContrast, - ...typography['paragraph-lg'], - marginTop: 4, - '&$disabled': { - color: palette.grey.dark, - }, - '[class*=MuiFormGroup-root] ~ &': { - marginTop: 3, - }, - '[class*=MuiTextField-root] > &$error': { - color: palette.text.darkLowContrast, - }, - }, -}); diff --git a/libs/spark/src/FormHelperText/index.ts b/libs/spark/src/FormHelperText/index.ts deleted file mode 100644 index 5ca306b50..000000000 --- a/libs/spark/src/FormHelperText/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './FormHelperText'; -export * from './FormHelperText'; diff --git a/libs/spark/src/FormLabel/FormLabel.ts b/libs/spark/src/FormLabel/FormLabel.ts deleted file mode 100644 index 38fe82453..000000000 --- a/libs/spark/src/FormLabel/FormLabel.ts +++ /dev/null @@ -1,14 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/FormLabel'; -export type { - /** @deprecated */ - FormLabelBaseProps, - /** @deprecated */ - FormLabelClassKey, - /** @deprecated */ - FormLabelProps, - /** @deprecated */ - FormLabelTypeMap, -} from '@material-ui/core/FormLabel'; diff --git a/libs/spark/src/FormLabel/defaults.ts b/libs/spark/src/FormLabel/defaults.ts deleted file mode 100644 index 18fd5a126..000000000 --- a/libs/spark/src/FormLabel/defaults.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { FormLabelClassKey } from './FormLabel'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiFormLabelStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - ...typography['label-lg-strong'], - color: palette.text.dark, - marginBottom: 3, - // Design doesn't specify focus style, but it improves a11y - '&$focused': { - color: palette.blue[3], - }, - // ONLY override for Input (not in a Checkbox / Radio group) - '&$error[class*=MuiInputLabel-root]': { - color: 'inherit', - }, - }, -}); diff --git a/libs/spark/src/FormLabel/index.ts b/libs/spark/src/FormLabel/index.ts deleted file mode 100644 index f1d14e274..000000000 --- a/libs/spark/src/FormLabel/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './FormLabel'; -export * from './FormLabel'; diff --git a/libs/spark/src/Grid/Grid.ts b/libs/spark/src/Grid/Grid.ts deleted file mode 100644 index 51e0c50fb..000000000 --- a/libs/spark/src/Grid/Grid.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/core/Grid'; -export * from '@material-ui/core/Grid'; diff --git a/libs/spark/src/Grid/index.ts b/libs/spark/src/Grid/index.ts deleted file mode 100644 index 243da15e1..000000000 --- a/libs/spark/src/Grid/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Grid'; -export * from './Grid'; diff --git a/libs/spark/src/IconButton/IconButton.spec.tsx b/libs/spark/src/IconButton/IconButton.spec.tsx deleted file mode 100644 index db57f94b9..000000000 --- a/libs/spark/src/IconButton/IconButton.spec.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import IconButton from './IconButton'; -import SparkThemeProvider from '../SparkThemeProvider'; - -describe('IconButton', () => { - it('is truthy', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/IconButton/IconButton.tsx b/libs/spark/src/IconButton/IconButton.tsx deleted file mode 100644 index f10a9b5e7..000000000 --- a/libs/spark/src/IconButton/IconButton.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { - IconButtonClassKey as MuiIconButtonClassKey, - IconButtonProps as MuiIconButtonProps, -} from '@material-ui/core/IconButton'; -import { default as MuiIconButton } from '@material-ui/core/IconButton'; -import makeStyles from '../makeStyles'; -import type { OverridableComponent } from '../utils'; -import { capitalize, useClassesCapture } from '../utils'; - -/** @deprecated */ -export interface IconButtonTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'button' -> { - props: P & IconButtonProps; - defaultComponent: D; - classKey: IconButtonClassKey; -} - -/** @deprecated */ -export type IconButtonProps = Omit & { - /** - * The size of the icon button. - */ - size?: 'large' | 'medium'; - /** - * The variant of the icon button. - */ - variant?: 'contained' | 'outlined' | 'text'; -}; - -/** @deprecated */ -export type IconButtonClassKey = MuiIconButtonClassKey | CustomClassKey; - -// IconButton is used in Radio/Checkbox, so all used classes must be -// scoped specifically to the custom component so they don't affect -// auxiliary, global use. -type CustomClassKey = - // from underlying - | 'root' - | 'label' - | 'disabled' - // custom - | 'contained' - | 'outlined' - | 'text' - | 'sizeLarge' - | 'sizeMedium'; - -const useCustomStyles = makeStyles( - ({ palette, typography }) => ({ - root: { - borderRadius: '50%', - borderWidth: 2, - borderStyle: 'solid' as const, - '&$disabled': { - opacity: '50%', - }, - '&:focus-visible': { - boxShadow: `0 0 0 4px ${palette.blue[1]}`, - }, - }, - label: { - color: 'inherit', - '$sizeLarge &': { - fontSize: typography.pxToRem(24), - lineHeight: typography.pxToRem(24), - }, - '$sizeMedium &': { - fontSize: typography.pxToRem(20), - lineHeight: typography.pxToRem(20), - }, - }, - disabled: {}, - contained: { - borderColor: palette.blue[3], - backgroundColor: palette.blue[3], - color: palette.common.white, - '&$disabled': { - backgroundColor: palette.blue[3], - color: palette.common.white, - }, - '&:hover': { - borderColor: palette.blue[4], - backgroundColor: palette.blue[4], - }, - '&:active': { - borderColor: palette.blue[5], - }, - }, - outlined: { - borderColor: palette.grey.medium, - backgroundColor: palette.common.white, - color: palette.blue[3], - '&$disabled': { - backgroundColor: palette.common.white, - color: palette.blue[3], - }, - '&:hover': { - backgroundColor: palette.grey.light, - }, - '&:active': { - backgroundColor: palette.grey.light, - borderColor: palette.blue[5], - }, - }, - text: { - borderColor: 'transparent', - backgroundColor: 'transparent', - color: palette.blue[3], - '&$disabled': { - backgroundColor: 'transparent', - color: palette.blue[3], - }, - '&:hover': { - color: palette.blue[4], - backgroundColor: 'transparent', - }, - '&:focus-visible': { - borderColor: palette.blue[3], - backgroundColor: palette.blue[1], - }, - '&:active': { - color: palette.blue[4], - }, - }, - sizeLarge: { - padding: 10, // plus 2px border width for 12px - }, - sizeMedium: { - padding: 4, // plus 2px border width for 6px - }, - }), - { name: 'MuiSparkIconButton' } -); - -/** @deprecated */ -const IconButton: OverridableComponent = forwardRef( - function IconButton( - { classes, variant = 'contained', size = 'large', children, ...other }, - ref - ) { - const baseCustomClasses = useCustomStyles(); - - const { otherClasses, customClasses } = useClassesCapture< - IconButtonClassKey, - CustomClassKey - >({ - classes, - baseCustomClasses, - }); - - return ( - - {children} - - ); - } -); - -// @ts-expect-error property displayName does not exist -IconButton.displayName = 'IconButton'; - -export default IconButton; diff --git a/libs/spark/src/IconButton/defaults.ts b/libs/spark/src/IconButton/defaults.ts deleted file mode 100644 index 825ba68ee..000000000 --- a/libs/spark/src/IconButton/defaults.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { IconButtonProps } from './IconButton'; - -// omit size because the customization is incompatible -export const MuiIconButtonDefaultProps: Partial> = - { - disableFocusRipple: true, - disableRipple: true, - }; diff --git a/libs/spark/src/IconButton/index.ts b/libs/spark/src/IconButton/index.ts deleted file mode 100644 index 655ec4c48..000000000 --- a/libs/spark/src/IconButton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './IconButton'; -export * from './IconButton'; diff --git a/libs/spark/src/Input/Input.tsx b/libs/spark/src/Input/Input.tsx deleted file mode 100644 index 838948abf..000000000 --- a/libs/spark/src/Input/Input.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/Input'; -export type { - /** @deprecated */ - InputClassKey, - /** @deprecated */ - InputProps, -} from '@material-ui/core/Input'; diff --git a/libs/spark/src/Input/defaults.ts b/libs/spark/src/Input/defaults.ts deleted file mode 100644 index 3fc837fd6..000000000 --- a/libs/spark/src/Input/defaults.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { InputClassKey, InputProps } from './Input'; -import type { StyleRules } from '../withStyles'; - -export const MuiInputDefaultProps: Partial = { - disableUnderline: true, -}; - -export const MuiInputStyleOverrides: Partial> = { - formControl: { - marginLeft: 0, - 'label + &': { - marginTop: 4, - }, - }, -}; diff --git a/libs/spark/src/Input/index.ts b/libs/spark/src/Input/index.ts deleted file mode 100644 index 8ce98e878..000000000 --- a/libs/spark/src/Input/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Input'; -export * from './Input'; diff --git a/libs/spark/src/InputAdornment/InputAdornment.ts b/libs/spark/src/InputAdornment/InputAdornment.ts deleted file mode 100644 index 4bd0c4337..000000000 --- a/libs/spark/src/InputAdornment/InputAdornment.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/core/InputAdornment'; -export * from '@material-ui/core/InputAdornment'; diff --git a/libs/spark/src/InputAdornment/defaults.ts b/libs/spark/src/InputAdornment/defaults.ts deleted file mode 100644 index 7086f13b2..000000000 --- a/libs/spark/src/InputAdornment/defaults.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { InputAdornmentClassKey } from './InputAdornment'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiInputAdornmentStylesOverrides = ({ - typography, -}: Theme): Partial> => ({ - root: { - fontSize: typography.pxToRem(24), - '[class*=MuiInputBase-multiline] > &': { - alignSelf: 'flex-start', - // half of typical icon height + input top margin - marginTop: 12 + 10, - }, - }, -}); diff --git a/libs/spark/src/InputAdornment/index.ts b/libs/spark/src/InputAdornment/index.ts deleted file mode 100644 index 02d5f6b51..000000000 --- a/libs/spark/src/InputAdornment/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from './InputAdornment'; -export type { - /** @deprecated */ - InputAdornmentClassKey, - /** @deprecated */ - InputAdornmentProps, - /** @deprecated */ - InputAdornmentTypeMap, -} from './InputAdornment'; diff --git a/libs/spark/src/InputBase/InputBase.tsx b/libs/spark/src/InputBase/InputBase.tsx deleted file mode 100644 index 887b96d08..000000000 --- a/libs/spark/src/InputBase/InputBase.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/InputBase'; -export type { - /** @deprecated */ - InputBaseClassKey, - /** @deprecated */ - InputBaseComponentProps, - /** @deprecated */ - InputBaseProps, -} from '@material-ui/core/InputBase'; diff --git a/libs/spark/src/InputBase/defaults.ts b/libs/spark/src/InputBase/defaults.ts deleted file mode 100644 index 442be67ee..000000000 --- a/libs/spark/src/InputBase/defaults.ts +++ /dev/null @@ -1,91 +0,0 @@ -import type { InputBaseClassKey } from './InputBase'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiInputBaseStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - ...typography['label-lg'], - color: palette.text.darkLowContrast, - lineHeight: 24 / 16, - boxSizing: 'border-box' as const, - backgroundColor: palette.common.white, - borderWidth: 2, - borderStyle: 'solid', - borderColor: palette.grey.medium, - borderRadius: 8, - width: '20rem', // 320px - margin: 4, // potential box-shadow width - '&$focused, &:focus-visible': { - borderColor: palette.blue[3], - boxShadow: `0 0 0 4px ${palette.blue[1]}`, - backgroundColor: palette.common.white, - }, - '&.Spark-success, [class*=MuiTextField-root].Spark-success > &': { - borderColor: palette.green[3], - boxShadow: `0 0 0 4px ${palette.green[1]}`, - }, - '&$error': { - borderColor: palette.red[3], - boxShadow: `0 0 0 4px ${palette.red[1]}`, - }, - '&$disabled': { - borderColor: palette.grey.dark, - backgroundColor: palette.grey.medium, - }, - }, - input: { - // -2px to account for border-width - padding: '10px 16px', - // override weird default `em` height - height: 'unset', - borderRadius: 8, - color: palette.text.dark, - '&::placeholder': { - color: palette.text.darkLowContrast, - opacity: 1, - }, - '&$disabled': { - opacity: 0.42, - '&::placeholder': { - opacity: 0.42, - }, - }, - }, - multiline: { - padding: '0px', - }, - inputMultiline: { - // -2px to account for border-width - padding: '10px 16px', - }, - formControl: { - // needs high specificity to override default !important - 'label[data-shrink="false"] + &$root > $input::placeholder': { - opacity: '1 !important', - }, - 'label[data-shrink="false"] + &$root$disabled > $input::placeholder': { - opacity: '0.42 !important', - }, - }, - adornedStart: { - paddingLeft: 14, - '$multiline&': { - paddingLeft: 14, - }, - }, - adornedEnd: { - paddingRight: 14, - '$multiline&': { - paddingRight: 14, - }, - }, - inputAdornedStart: { - paddingLeft: 8, - }, - inputAdornedEnd: { - paddingRight: 8, - }, -}); diff --git a/libs/spark/src/InputBase/index.ts b/libs/spark/src/InputBase/index.ts deleted file mode 100644 index 57af32716..000000000 --- a/libs/spark/src/InputBase/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './InputBase'; -export * from './InputBase'; diff --git a/libs/spark/src/InputLabel/InputLabel.ts b/libs/spark/src/InputLabel/InputLabel.ts deleted file mode 100644 index 5ef29d32a..000000000 --- a/libs/spark/src/InputLabel/InputLabel.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/InputLabel'; -export type { - /** @deprecated */ - InputLabelClassKey, - /** @deprecated */ - InputLabelProps, -} from '@material-ui/core/InputLabel'; diff --git a/libs/spark/src/InputLabel/defaults.ts b/libs/spark/src/InputLabel/defaults.ts deleted file mode 100644 index 61d7344b0..000000000 --- a/libs/spark/src/InputLabel/defaults.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { InputLabelClassKey, InputLabelProps } from './InputLabel'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiInputLabelDefaultProps: Partial = { - disableAnimation: true, -}; - -export const MuiInputLabelStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - ...typography['label-lg-strong'], - color: palette.text.dark, - marginBottom: 4, - '&$disabled': { - color: palette.grey.dark, - }, - }, - shrink: { - transform: 'none', - transformOrigin: 'unset', - }, - formControl: { - transform: 'none', - position: 'relative' as const, - }, -}); diff --git a/libs/spark/src/InputLabel/index.ts b/libs/spark/src/InputLabel/index.ts deleted file mode 100644 index 84065e7a9..000000000 --- a/libs/spark/src/InputLabel/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './InputLabel'; -export * from './InputLabel'; diff --git a/libs/spark/src/LinearProgress_unstable/index.ts b/libs/spark/src/LinearProgress_unstable/index.ts deleted file mode 100644 index 9329ef479..000000000 --- a/libs/spark/src/LinearProgress_unstable/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated use `alpha/LinearProgress` */ - default, -} from '../alpha/LinearProgress'; -export type { - /** @deprecated */ - LinearProgressClassKey as LinearProgressClassKey_unstable, - /** @deprecated */ - LinearProgressProps as LinearProgressProps_unstable, -} from '../alpha/LinearProgress'; diff --git a/libs/spark/src/Link/Link.tsx b/libs/spark/src/Link/Link.tsx deleted file mode 100644 index 1f07d3b22..000000000 --- a/libs/spark/src/Link/Link.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { LinkProps as MuiLinkProps } from '@material-ui/core/Link'; -import { default as MuiLink } from '@material-ui/core/Link'; -import makeStyles from '../makeStyles'; -import type { OverridableComponent, OverrideProps } from '../utils'; -import { useMergeClasses } from '../utils'; - -/** @deprecated */ -export interface LinkTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'a' -> { - props: P & - Omit & { - /** - * Whether the link is displayed alone (not inline with other text). Removes "underline" text-decoration of the link. - */ - standalone?: boolean; - }; - defaultComponent: D; - classKey: LinkClassKey; -} - -/** @deprecated */ -export type LinkProps< - D extends ElementType = LinkTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -/** @deprecated */ -export type LinkClassKey = 'root' | 'standalone' | 'focusVisible'; - -const useStyles = makeStyles( - ({ palette }) => ({ - /* Styles applied to the root element. */ - root: { - textDecoration: 'underline', - color: palette.blue[3], - '&:hover': { - color: palette.blue[2], - }, - // reset browser default - '&:focus': { - outline: 'none', - }, - '&$focusVisible, &:focus-visible': { - color: palette.blue[2], - boxShadow: `0 0 0 4px ${palette.blue[1]}`, - }, - '&:visited': { - color: palette.purple[3], - '&:hover': { - color: palette.purple[2], - }, - }, - }, - /* Styles applied to the root element if `standalone={true}`. */ - standalone: { - textDecoration: 'none', - }, - /* Pseudo-class applied to the root element if the link is keyboard focused. */ - focusVisible: {}, - }), - { name: 'MuiSparkLink' } -); - -/** @deprecated */ -const Link: OverridableComponent = forwardRef(function Link( - { - classes: classesProp, - // reset MuiLink default prop to match our Typography default - color = 'inherit', - standalone, - ...other - }, - ref -) { - const baseClasses = useStyles(); - - // Should use classes capture, but this extra work is menial. - const { standalone: standaloneClass, ...otherClasses } = useMergeClasses({ - baseClasses, - classesProp, - }); - - return ( - - ); -}); - -export default Link; diff --git a/libs/spark/src/Link/index.ts b/libs/spark/src/Link/index.ts deleted file mode 100644 index 66918f57f..000000000 --- a/libs/spark/src/Link/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Link'; -export * from './Link'; diff --git a/libs/spark/src/List/List.ts b/libs/spark/src/List/List.ts deleted file mode 100644 index 94b929254..000000000 --- a/libs/spark/src/List/List.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/List'; -export type { - /** @deprecated */ - ListClassKey, - /** @deprecated */ - ListProps, - /** @deprecated */ - ListTypeMap, -} from '@material-ui/core/List'; diff --git a/libs/spark/src/List/defaults.ts b/libs/spark/src/List/defaults.ts deleted file mode 100644 index 9c51d0bfe..000000000 --- a/libs/spark/src/List/defaults.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { ListClassKey } from './List'; -import type { StyleRules } from '../withStyles'; - -export const MuiListStyleOverrides: Partial> = { - subheader: { - paddingTop: 8, - }, -}; diff --git a/libs/spark/src/List/index.ts b/libs/spark/src/List/index.ts deleted file mode 100644 index 0e50cb557..000000000 --- a/libs/spark/src/List/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './List'; -export * from './List'; diff --git a/libs/spark/src/ListItem/ListItem.ts b/libs/spark/src/ListItem/ListItem.ts deleted file mode 100644 index 6538c5b25..000000000 --- a/libs/spark/src/ListItem/ListItem.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/ListItem'; -export type { - /** @deprecated */ - ListItemClassKey, - /** @deprecated */ - ListItemProps, - /** @deprecated */ - ListItemTypeMap, -} from '@material-ui/core/ListItem'; diff --git a/libs/spark/src/ListItem/defaults.ts b/libs/spark/src/ListItem/defaults.ts deleted file mode 100644 index a169845d0..000000000 --- a/libs/spark/src/ListItem/defaults.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { ListItemClassKey } from './ListItem'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiListItemStyleOverrides = ({ - palette, - transitions, -}: Theme): Partial> => ({ - root: { - '&$disabled': { - color: palette.grey.dark, - }, - }, - button: { - transition: transitions.create(['background-color', 'border-color'], { - duration: transitions.duration.shortest, - }), - }, -}); diff --git a/libs/spark/src/ListItem/index.ts b/libs/spark/src/ListItem/index.ts deleted file mode 100644 index d0ef0af7f..000000000 --- a/libs/spark/src/ListItem/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ListItem'; -export * from './ListItem'; diff --git a/libs/spark/src/ListItemAvatar/ListItemAvatar.ts b/libs/spark/src/ListItemAvatar/ListItemAvatar.ts deleted file mode 100644 index 7252f8746..000000000 --- a/libs/spark/src/ListItemAvatar/ListItemAvatar.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/ListItemAvatar'; -export type { - /** @deprecated */ - ListItemAvatarClassKey, - /** @deprecated */ - ListItemAvatarProps, -} from '@material-ui/core/ListItemAvatar'; diff --git a/libs/spark/src/ListItemAvatar/defaults.ts b/libs/spark/src/ListItemAvatar/defaults.ts deleted file mode 100644 index cba40e83a..000000000 --- a/libs/spark/src/ListItemAvatar/defaults.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { ListItemAvatarClassKey } from './ListItemAvatar'; -import type { StyleRules } from '../withStyles'; - -export const MuiListItemAvatarStyleOverrides: Partial< - StyleRules -> = { - root: { - minWidth: 'unset', - marginRight: 8, - }, -}; diff --git a/libs/spark/src/ListItemAvatar/index.ts b/libs/spark/src/ListItemAvatar/index.ts deleted file mode 100644 index f542f30d1..000000000 --- a/libs/spark/src/ListItemAvatar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ListItemAvatar'; -export * from './ListItemAvatar'; diff --git a/libs/spark/src/ListItemIcon/ListItemIcon.ts b/libs/spark/src/ListItemIcon/ListItemIcon.ts deleted file mode 100644 index daf06b8ca..000000000 --- a/libs/spark/src/ListItemIcon/ListItemIcon.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/core/ListItemIcon'; -export * from '@material-ui/core/ListItemIcon'; diff --git a/libs/spark/src/ListItemIcon/defaults.ts b/libs/spark/src/ListItemIcon/defaults.ts deleted file mode 100644 index 1ca40ad28..000000000 --- a/libs/spark/src/ListItemIcon/defaults.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { ListItemIconClassKey } from './ListItemIcon'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiListItemIconStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - color: palette.text.darkLowContrast, - fontSize: typography.pxToRem(24), - minWidth: 'unset', - marginRight: 8, - '& [class*=MuiCheckbox-root]': { - padding: 1, - }, - '.Mui-selected > &': { - color: palette.common.white, - '& *[fill="#F0F1F2"]': { - fill: palette.blue[3], - }, - }, - }, -}); diff --git a/libs/spark/src/ListItemIcon/index.ts b/libs/spark/src/ListItemIcon/index.ts deleted file mode 100644 index 31851d877..000000000 --- a/libs/spark/src/ListItemIcon/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from './ListItemIcon'; -export type { - /** @deprecated */ - ListItemIconClassKey, - /** @deprecated */ - ListItemIconProps, -} from './ListItemIcon'; diff --git a/libs/spark/src/ListItemSecondaryAction/ListItemSecondaryAction.ts b/libs/spark/src/ListItemSecondaryAction/ListItemSecondaryAction.ts deleted file mode 100644 index d522dfe44..000000000 --- a/libs/spark/src/ListItemSecondaryAction/ListItemSecondaryAction.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/ListItemSecondaryAction'; -export type { - /** @deprecated */ - ListItemSecondaryActionClassKey, - /** @deprecated */ - ListItemSecondaryActionProps, -} from '@material-ui/core/ListItemSecondaryAction'; diff --git a/libs/spark/src/ListItemSecondaryAction/defaults.ts b/libs/spark/src/ListItemSecondaryAction/defaults.ts deleted file mode 100644 index 46bcde39c..000000000 --- a/libs/spark/src/ListItemSecondaryAction/defaults.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { ListItemSecondaryActionClassKey } from './ListItemSecondaryAction'; -import type { StyleRules } from '../withStyles'; - -export const MuiListItemSecondaryActionStyleOverrides: Partial< - StyleRules -> = { - root: { - right: 8, - }, -}; diff --git a/libs/spark/src/ListItemSecondaryAction/index.ts b/libs/spark/src/ListItemSecondaryAction/index.ts deleted file mode 100644 index f648fa72a..000000000 --- a/libs/spark/src/ListItemSecondaryAction/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ListItemSecondaryAction'; -export * from './ListItemSecondaryAction'; diff --git a/libs/spark/src/ListItemText/ListItemText.ts b/libs/spark/src/ListItemText/ListItemText.ts deleted file mode 100644 index 2e3f7ad5c..000000000 --- a/libs/spark/src/ListItemText/ListItemText.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/ListItemText'; -export type { - /** @deprecated */ - ListItemTextClassKey, - /** @deprecated */ - ListItemTextProps, -} from '@material-ui/core/ListItemText'; diff --git a/libs/spark/src/ListItemText/defaults.ts b/libs/spark/src/ListItemText/defaults.ts deleted file mode 100644 index 8a603293b..000000000 --- a/libs/spark/src/ListItemText/defaults.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { ListItemTextClassKey } from './ListItemText'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiListItemTextStyleOverrides = ({ - typography, -}: Theme): Partial> => ({ - primary: { - ...typography['label-lg'], - }, -}); diff --git a/libs/spark/src/ListItemText/index.ts b/libs/spark/src/ListItemText/index.ts deleted file mode 100644 index 1b602ac6e..000000000 --- a/libs/spark/src/ListItemText/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ListItemText'; -export * from './ListItemText'; diff --git a/libs/spark/src/ListSubheader/ListSubheader.ts b/libs/spark/src/ListSubheader/ListSubheader.ts deleted file mode 100644 index 71a5b1d9e..000000000 --- a/libs/spark/src/ListSubheader/ListSubheader.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/ListSubheader'; -export type { - /** @deprecated */ - ListSubheaderClassKey, - /** @deprecated */ - ListSubheaderProps, - /** @deprecated */ - ListSubheaderTypeMap, -} from '@material-ui/core/ListSubheader'; diff --git a/libs/spark/src/ListSubheader/defaults.ts b/libs/spark/src/ListSubheader/defaults.ts deleted file mode 100644 index 7b9e1f205..000000000 --- a/libs/spark/src/ListSubheader/defaults.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { ListSubheaderClassKey } from './ListSubheader'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiListSubheaderStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - ...typography['uppercase-sm'], - // NOTE: divisor should be font size of above, in pixels - lineHeight: 28 / 12, - color: palette.text.darkLowContrast, - }, -}); diff --git a/libs/spark/src/ListSubheader/index.ts b/libs/spark/src/ListSubheader/index.ts deleted file mode 100644 index 515934dd4..000000000 --- a/libs/spark/src/ListSubheader/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ListSubheader'; -export * from './ListSubheader'; diff --git a/libs/spark/src/Menu/Menu.ts b/libs/spark/src/Menu/Menu.ts deleted file mode 100644 index edc696e61..000000000 --- a/libs/spark/src/Menu/Menu.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/Menu'; -export type { - /** @deprecated */ - MenuClassKey, - /** @deprecated */ - MenuProps, -} from '@material-ui/core/Menu'; diff --git a/libs/spark/src/Menu/defaults.ts b/libs/spark/src/Menu/defaults.ts deleted file mode 100644 index b375fabfd..000000000 --- a/libs/spark/src/Menu/defaults.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { MenuClassKey, MenuProps } from './Menu'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiMenuDefaultProps: Partial = { - elevation: 4, // E400 -}; - -export const MuiMenuStyleOverrides = ({ - palette, -}: Theme): Partial> => ({ - paper: { - borderRadius: 8, - // This is a poor hack. The internal calculations of a Menu's Popover - // for determining the Paper's absolute positioning on the screen - // rely on measurements of the anchor's "client" positioning that - // don't include margin. So, when the `anchorOrigin.vertical === 'bottom'` - // and `transformOrigin.vertical === 'top'`, the stars align so margin can - // have the desired affect, but other combos do not work. - // TODO: open issue and submit PR for a new prop that gets factored into - // the absolute positioning of the Paper, like `additionalContentOffset`. - '&[class*=MuiSparkMenu-offsetTop]': { - marginTop: 8, - }, - }, - list: { - border: `2px solid ${palette.grey.medium}`, - borderRadius: 8, - }, -}); diff --git a/libs/spark/src/Menu/index.ts b/libs/spark/src/Menu/index.ts deleted file mode 100644 index f37ee009b..000000000 --- a/libs/spark/src/Menu/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Menu'; -export * from './Menu'; diff --git a/libs/spark/src/MenuItem/MenuItem.spec.tsx b/libs/spark/src/MenuItem/MenuItem.spec.tsx deleted file mode 100644 index 0dacb71b3..000000000 --- a/libs/spark/src/MenuItem/MenuItem.spec.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import MenuItem from './MenuItem'; -import SparkThemeProvider from '../SparkThemeProvider'; - -describe('Input', () => { - it('is truthy', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/MenuItem/MenuItem.ts b/libs/spark/src/MenuItem/MenuItem.ts deleted file mode 100644 index 3ef91b961..000000000 --- a/libs/spark/src/MenuItem/MenuItem.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/MenuItem'; -export type { - /** @deprecated */ - MenuItemClassKey, - /** @deprecated */ - MenuItemProps, - /** @deprecated */ - MenuItemTypeMap, -} from '@material-ui/core/MenuItem'; diff --git a/libs/spark/src/MenuItem/defaults.ts b/libs/spark/src/MenuItem/defaults.ts deleted file mode 100644 index 1893469e0..000000000 --- a/libs/spark/src/MenuItem/defaults.ts +++ /dev/null @@ -1,62 +0,0 @@ -import type { MenuItemClassKey } from './MenuItem'; -import type { Theme } from '../theme'; -import type { StyleRules } from '../withStyles'; - -export const MuiMenuItemStyleOverrides = ({ - palette, - typography, -}: Theme): Partial> => ({ - root: { - ...typography['label-lg'], - boxSizing: 'border-box' as const, - color: palette.text.dark, - minWidth: 228, - minHeight: '2.125rem', // 34px - border: '2px solid transparent', - // have to separate to override - paddingTop: 4, - paddingBottom: 4, - paddingRight: 14, - paddingLeft: 14, - margin: 0, - '&:first-child': { - marginTop: 0, - }, - '&:last-child': { - marginBottom: 0, - }, - '&:hover': { - backgroundColor: palette.grey.light, - borderColor: palette.grey.light, - }, - '&:focus-visible': { - backgroundColor: palette.grey.light, - borderColor: palette.blue[4], - }, - '&:active': { - backgroundColor: palette.grey.medium, - borderColor: palette.blue[4], - }, - - '&$selected': { - backgroundColor: palette.blue[3], - borderColor: palette.blue[3], - color: palette.common.white, - }, - '&$selected:hover': { - backgroundColor: palette.blue[4], - borderColor: palette.blue[4], - color: palette.common.white, - }, - '&$selected:focus-visible': { - backgroundColor: palette.blue[3], - borderColor: palette.blue[5], - color: palette.common.white, - }, - '&$selected:active': { - backgroundColor: palette.blue[4], - borderColor: palette.blue[5], - color: palette.common.white, - }, - }, -}); diff --git a/libs/spark/src/MenuItem/index.ts b/libs/spark/src/MenuItem/index.ts deleted file mode 100644 index 165579e4b..000000000 --- a/libs/spark/src/MenuItem/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './MenuItem'; -export * from './MenuItem'; diff --git a/libs/spark/src/MenuList/MenuList.ts b/libs/spark/src/MenuList/MenuList.ts deleted file mode 100644 index 804daeafa..000000000 --- a/libs/spark/src/MenuList/MenuList.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { - /** @deprecated */ - default, -} from '@material-ui/core/MenuList'; -export type { - /** @deprecated */ - MenuListClassKey, - /** @deprecated */ - MenuListProps, -} from '@material-ui/core/MenuList'; diff --git a/libs/spark/src/MenuList/index.ts b/libs/spark/src/MenuList/index.ts deleted file mode 100644 index 1e829f1e6..000000000 --- a/libs/spark/src/MenuList/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './MenuList'; -export * from './MenuList'; diff --git a/libs/spark/src/NavBar/NavBar.spec.tsx b/libs/spark/src/NavBar/NavBar.spec.tsx deleted file mode 100644 index 875625ddc..000000000 --- a/libs/spark/src/NavBar/NavBar.spec.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import NavBar from './NavBar'; -import SparkThemeProvider from '../SparkThemeProvider'; - -describe('NavBar', () => { - it('is truthy', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/NavBar/NavBar.tsx b/libs/spark/src/NavBar/NavBar.tsx deleted file mode 100644 index a4d7aff6f..000000000 --- a/libs/spark/src/NavBar/NavBar.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import type { AppBarProps } from '@material-ui/core/AppBar'; -import { default as AppBar } from '@material-ui/core/AppBar'; -import withStyles from '../withStyles'; - -/** @deprecated */ -export interface NavBarProps extends Omit { - /** - * @default 'default' - */ - color?: 'default'; -} - -/** @deprecated use `alpha/TopBar` */ -export default withStyles(({ palette }) => ({ - root: { - backgroundColor: palette.common.white, - borderBottom: `2px solid ${palette.grey.medium}`, - fontSize: '1.125rem', - color: palette.text.darkLowContrast, - }, -}))(({ color = 'default', ...other }: NavBarProps) => ( - -)); diff --git a/libs/spark/src/NavBar/index.ts b/libs/spark/src/NavBar/index.ts deleted file mode 100644 index fdac6d1d7..000000000 --- a/libs/spark/src/NavBar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './NavBar'; -export * from './NavBar'; diff --git a/libs/spark/src/NavBarButton/NavBarButton.tsx b/libs/spark/src/NavBarButton/NavBarButton.tsx deleted file mode 100644 index 30dc2e13e..000000000 --- a/libs/spark/src/NavBarButton/NavBarButton.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import type { ButtonProps } from '@material-ui/core/Button'; -import { default as Button } from '@material-ui/core/Button'; -import withStyles from '../withStyles'; - -export type NavBarButtonProps = Omit; - -export default withStyles((theme) => ({ - root: { - borderRadius: 8, - backgroundColor: 'transparent', - border: '2px solid transparent', - padding: 6, - textTransform: 'none', - color: theme.palette.text.darkLowContrast, - '&:hover': { - backgroundColor: theme.palette.grey.light, - border: `2px solid ${theme.palette.grey.light}`, - }, - '&:focus-visible': { - boxShadow: 'none', - border: `2px solid ${theme.palette.blue[4]}`, - outline: 'none', - backgroundColor: theme.palette.grey.light, - }, - '&:active, &[aria-current=page]': { - border: `2px solid ${theme.palette.grey.light}`, - backgroundColor: theme.palette.grey.light, - color: theme.palette.text.dark, - '& *[fill="#F0F1F2"]': { - fill: theme.palette.blue[3], - fillOpacity: '0.24', - }, - }, - }, - label: { - height: 32, - }, - startIcon: { - // have to specify individually to override defaults - marginTop: '-2px', - marginBottom: '-2px', - marginRight: '8px', - marginLeft: 0, - }, - endIcon: { - // have to specify individually to override defaults - marginTop: '-2px', - marginBottom: '-2px', - marginLeft: '8px', - marginRight: 0, - }, - iconSizeLarge: { - // artificially increase specificity to win battle with mui default - '&& > :first-child': { - fontSize: '2rem', - }, - }, - disabled: { - // artificially increase specificity to win battle with spark default - '&&': { - opacity: '100%', - color: theme.palette.grey.dark, - backgroundColor: 'transparent', - borderColor: 'transparent', - }, - }, - focusVisible: { - backgroundColor: theme.palette.grey.light, - }, -}))((props: NavBarButtonProps) => - - - ); -}; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const MenuListPropsDisablePadding: Story = Template.bind({}); -MenuListPropsDisablePadding.args = { MenuListProps: { disablePadding: true } }; -MenuListPropsDisablePadding.storyName = 'MenuListProps={disablePadding}'; - -export const MenuListPropsSubheader: Story = Template.bind({}); -MenuListPropsSubheader.args = { MenuListProps: { subheader: 'Subheader' } }; -MenuListPropsSubheader.storyName = 'MenuListProps={subheader}'; - -export const MenuListPropsSubheaderDisableSticky: Story = Template.bind({}); -MenuListPropsSubheaderDisableSticky.args = { - MenuListProps: { - ListSubheaderProps: { disableSticky: true }, - subheader: 'Subheader', - }, -}; -MenuListPropsSubheaderDisableSticky.storyName = - 'MenuListProps={subheader, ListSubheaderProps: {disableSticky}}'; diff --git a/libs/spark/src/alpha/Menu/Menu.test.tsx b/libs/spark/src/alpha/Menu/Menu.test.tsx deleted file mode 100644 index ac9e9185f..000000000 --- a/libs/spark/src/alpha/Menu/Menu.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { render } from '@testing-library/react'; -import Menu from './Menu'; - -describe('Menu', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - document.createElement('div')} /> - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Menu/Menu.tsx b/libs/spark/src/alpha/Menu/Menu.tsx deleted file mode 100644 index 6432ede72..000000000 --- a/libs/spark/src/alpha/Menu/Menu.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { forwardRef } from 'react'; -import type { - MenuProps as MuiMenuProps, - MenuClassKey as MuiMenuClassKey, -} from '@material-ui/core/Menu'; -import MuiMenu from '@material-ui/core/Menu'; -import ListSubheader from '../ListSubheader'; -import type { ListProps } from '../List'; -import type { StandardProps } from '../../utils'; -import { useId } from '../../utils'; -import type { PaperProps } from '../Paper'; -import { usePaperStyles } from '../Paper'; -import clsx from 'clsx'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface MenuProps - extends StandardProps< - Omit, - MenuClassKey, - 'MenuListProps' | 'PaperProps' - > { - /** - * Whether the menu is visible. - */ - open?: boolean; - /** - * Props applied to the `MenuList` element. - */ - MenuListProps?: Omit & - Pick; - /** - * Props applied to the `Paper` element. - */ - PaperProps?: Partial; -} - -export type MenuClassKey = MuiMenuClassKey; - -const styles: Styles = (theme) => ({ - paper: {}, - list: { - border: 'unset', // reset v1 - borderRadius: 'unset', // reset v1 - }, -}); - -const UnstyledMenu = forwardRef(function Menu(props, ref) { - const { MenuListProps, open = false, PaperProps = {}, ...other } = props; - - const { - bgcolor: bgcolorPaperProp = 'default', - border: borderPaperProp = 'none', - className: classNamePaperProp, - radius: radiusPaperProp = 'sm', - shadow: shadowPaperProp = 'E400', - ...otherPaperProps - } = PaperProps; - - const paperClasses = usePaperStyles(); - - const { ListSubheaderProps, subheader, ...otherMenuListProps } = - MenuListProps || {}; - - const subheaderId = useId(ListSubheaderProps?.id); - - return ( - - {subheader} - - ) : undefined, - ...(subheader && { 'aria-labelledby': subheaderId }), - ...otherMenuListProps, - }} - {...other} - /> - ); -}); - -const Menu = withStyles(styles, { name: 'MuiSpark_alpha_Menu' })(UnstyledMenu); - -export default Menu; diff --git a/libs/spark/src/alpha/Menu/index.ts b/libs/spark/src/alpha/Menu/index.ts deleted file mode 100644 index f37ee009b..000000000 --- a/libs/spark/src/alpha/Menu/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Menu'; -export * from './Menu'; diff --git a/libs/spark/src/alpha/MenuItem/MenuItem.stories.tsx b/libs/spark/src/alpha/MenuItem/MenuItem.stories.tsx deleted file mode 100644 index 5e2d6240f..000000000 --- a/libs/spark/src/alpha/MenuItem/MenuItem.stories.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { MenuItemProps } from '..'; -import { Avatar, MenuItem } from '..'; -import { containBoxShadow, enableHooks, statefulValue } from '../../../stories'; -import { default as ListItemMeta } from '../ListItem/ListItem.stories'; - -export const _retyped = MenuItem as typeof MenuItem; - -export default { - title: '@ps/MenuItem', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [statefulValue, enableHooks], - args: { - children: <>Label, - }, - argTypes: { - primaryAction: ListItemMeta.argTypes.primaryAction, - secondaryAction: ListItemMeta.argTypes.secondaryAction, - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const FocusVisible: Story = Template.bind({}); -FocusVisible.decorators = [containBoxShadow]; -FocusVisible.parameters = { pseudo: { focusVisible: true } }; -FocusVisible.storyName = ':focus-visible'; - -// ============ -// = Examples = -// ============ - -export const SelectedStudent = (args) => ( - - ), - row: true, - tertiary: '4th grade', - }} - selected - {...args} - > - John Doe - -); diff --git a/libs/spark/src/alpha/MenuItem/MenuItem.test.tsx b/libs/spark/src/alpha/MenuItem/MenuItem.test.tsx deleted file mode 100644 index d4b65abd9..000000000 --- a/libs/spark/src/alpha/MenuItem/MenuItem.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import MenuItem from './MenuItem'; - -describe('MenuItem', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(Label); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/MenuItem/MenuItem.tsx b/libs/spark/src/alpha/MenuItem/MenuItem.tsx deleted file mode 100644 index ce782d3a8..000000000 --- a/libs/spark/src/alpha/MenuItem/MenuItem.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import type { ElementType, Ref } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { ListItemProps, ListItemTypeMap } from '../ListItem'; -import ListItem from '../ListItem'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import type { ExtendButtonBase } from '../../ButtonBase'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export type MenuItemTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'li' -> = Omit, 'classKey'> & { - classKey: MenuItemClassKey; - props: P & { - /** - * The `classes` prop applied to the `ListItem` element. - */ - ListItemClasses?: ListItemProps['classes']; - }; -}; - -export type MenuItemProps< - D extends ElementType = MenuItemTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type MenuItemClassKey = 'root' | 'selected'; - -const styles: Styles = { - root: { - width: 'auto', - overflow: 'hidden', - whiteSpace: 'nowrap', - }, - selected: {}, -}; - -// @ts-expect-error can't handle overloads by `button` values -const MenuItem: OverridableComponent< - MenuItemTypeMap<{ button: false }, MenuItemTypeMap['defaultComponent']> -> & - ExtendButtonBase< - MenuItemTypeMap<{ button?: true }, MenuItemTypeMap['defaultComponent']> - > = forwardRef(function MenuItem(props, ref) { - const { - children, - classes, - className, - // @ts-expect-error not picked up - component = 'li', - ListItemClasses, - role = 'menuitem', - selected, - tabIndex: tabIndexProp, - ...other - } = props; - - let tabIndex; - if (!props.disabled) { - tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1; - } - - return ( - } - role={role} - selected={selected} - tabIndex={tabIndex} - {...other} - > - {children} - - ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_MenuItem' })( - MenuItem -) as typeof MenuItem; diff --git a/libs/spark/src/alpha/MenuItem/index.ts b/libs/spark/src/alpha/MenuItem/index.ts deleted file mode 100644 index 165579e4b..000000000 --- a/libs/spark/src/alpha/MenuItem/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './MenuItem'; -export * from './MenuItem'; diff --git a/libs/spark/src/alpha/MenuList/MenuList.stories.tsx b/libs/spark/src/alpha/MenuList/MenuList.stories.tsx deleted file mode 100644 index 945d7a654..000000000 --- a/libs/spark/src/alpha/MenuList/MenuList.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { MenuListProps } from '..'; -import { MenuItem, MenuList } from '..'; -import { containBoxShadow } from '../../../stories'; - -export const _retyped = MenuList as typeof MenuList; - -export default { - title: '@ps/MenuList', - component: _retyped, - excludeStories: ['_retyped'], - args: { - children: '(MenuItem x4)', - }, - argTypes: { - children: { - control: 'select', - options: ['(MenuItem x4)'], - mapping: { - '(MenuItem x4)': Array.from(Array(4)).map((_v, i) => ( - Menu item {i} - )), - }, - }, - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const FocusVisible: Story = Template.bind({}); -FocusVisible.decorators = [containBoxShadow]; -FocusVisible.parameters = { pseudo: { focusVisible: true } }; -FocusVisible.storyName = ':focus-visible'; - -export const DisablePadding: Story = Template.bind({}); -DisablePadding.args = { disablePadding: true }; -DisablePadding.storyName = 'disablePadding'; - -export const Subheader: Story = Template.bind({}); -Subheader.args = { subheader: 'Subheader' }; -Subheader.storyName = 'subheader'; diff --git a/libs/spark/src/alpha/MenuList/MenuList.test.tsx b/libs/spark/src/alpha/MenuList/MenuList.test.tsx deleted file mode 100644 index 2cc3051c5..000000000 --- a/libs/spark/src/alpha/MenuList/MenuList.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import MenuList from './MenuList'; - -describe('MenuList', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/MenuList/MenuList.tsx b/libs/spark/src/alpha/MenuList/MenuList.tsx deleted file mode 100644 index f1eab54ff..000000000 --- a/libs/spark/src/alpha/MenuList/MenuList.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import type { Ref } from 'react'; -import React, { forwardRef } from 'react'; -import type { MenuListProps as MuiMenuListProps } from '@material-ui/core/MenuList'; -import MuiMenuList from '@material-ui/core/MenuList'; -import ListSubheader from '../ListSubheader'; -import type { StandardProps } from '../../utils'; -import { useId } from '../../utils'; -import type { ListClassKey, ListProps } from '../List'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface MenuListProps - extends StandardProps, - Pick {} - -export type MenuListClassKey = ListClassKey; - -const MenuList = forwardRef(function MenuList( - props, - ref -) { - const { ListSubheaderProps, subheader, ...other } = props; - - const subheaderId = useId(ListSubheaderProps?.id); - - return ( - } - subheader={ - subheader ? ( - - {subheader} - - ) : undefined - } - {...(subheader && { 'aria-labelledby': subheaderId })} - {...other} - /> - ); -}); - -export default MenuList; diff --git a/libs/spark/src/alpha/MenuList/index.ts b/libs/spark/src/alpha/MenuList/index.ts deleted file mode 100644 index 1e829f1e6..000000000 --- a/libs/spark/src/alpha/MenuList/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './MenuList'; -export * from './MenuList'; diff --git a/libs/spark/src/alpha/Modal/Modal.ts b/libs/spark/src/alpha/Modal/Modal.ts deleted file mode 100644 index 303ed0865..000000000 --- a/libs/spark/src/alpha/Modal/Modal.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { ModalProps as MuiModalProps } from '@material-ui/core/Modal'; - -export interface ModalProps extends Omit { - /** - * Callback fired when the component requests to be closed. - * The `reason` parameter can optionally be used to control the response to `onClose`. - * - * @param {object} event The event source of the callback. - * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"closeClick"`. - */ - onClose?: { - bivarianceHack( - // eslint-disable-next-line @typescript-eslint/ban-types - event: {}, - reason: 'backdropClick' | 'escapeKeyDown' | 'closeClick' - ): void; - }['bivarianceHack']; -} diff --git a/libs/spark/src/alpha/Modal/index.ts b/libs/spark/src/alpha/Modal/index.ts deleted file mode 100644 index cb89ee178..000000000 --- a/libs/spark/src/alpha/Modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Modal'; diff --git a/libs/spark/src/alpha/ModalDialog/ModalDialog.stories.tsx b/libs/spark/src/alpha/ModalDialog/ModalDialog.stories.tsx deleted file mode 100644 index 05d00e7af..000000000 --- a/libs/spark/src/alpha/ModalDialog/ModalDialog.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { ModalDialogProps } from '..'; -import { - Button, - ModalDialog, - ModalDialogActions, - ModalDialogContent, - ModalDialogContentText, - ModalDialogTitle, -} from '..'; - -export const _retyped = ModalDialog as typeof ModalDialog; - -export default { - title: '@ps/ModalDialog', - component: _retyped, - excludeStories: ['_retyped'], -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Example: Story = Template.bind({}); -Example.args = { - children: ( - <> - Title - - - This is the body of the dialog. It can span multiple lines and - sometimes it will cause a scrollbar to appear on the right. If a - dialog gets too long consider creating a new page for your content. - - - This is a second paragraph of text. It is spaced from the previous - paragraph. - - - - - - - - ), - closeable: true, - fullWidth: true, - maxWidth: 'sm', - open: true, -}; -Example.storyName = 'Example'; diff --git a/libs/spark/src/alpha/ModalDialog/ModalDialog.test.tsx b/libs/spark/src/alpha/ModalDialog/ModalDialog.test.tsx deleted file mode 100644 index 31ed8d877..000000000 --- a/libs/spark/src/alpha/ModalDialog/ModalDialog.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import ModalDialog from './ModalDialog'; - -describe('ModalDialog', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/ModalDialog/ModalDialog.tsx b/libs/spark/src/alpha/ModalDialog/ModalDialog.tsx deleted file mode 100644 index 09d4dc64f..000000000 --- a/libs/spark/src/alpha/ModalDialog/ModalDialog.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import type { DialogProps as MuiDialogProps } from '@material-ui/core/Dialog'; -import MuiDialog from '@material-ui/core/Dialog'; -import type { ComponentType } from 'react'; -import React, { forwardRef } from 'react'; -import { Cross } from '../../internal'; -import type { IconButtonProps } from '../IconButton'; -import IconButton from '../IconButton'; -import type { PaperProps } from '../Paper'; -import Paper from '../Paper'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; -import type { StandardProps } from '../../utils'; -import type { ModalProps } from '../Modal'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface ModalDialogProps - extends StandardProps< - MuiDialogProps, - ModalDialogClassKey, - 'classes' | 'onClose' | 'PaperComponent' | 'PaperProps' - > { - /** - * Whether a close button should be shown at the top-right of the component. - */ - closeable?: boolean; - /** - * Callback fired when the component requests to be closed. - * - * @param event The event source of the callback. - * @param reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"closeClick"`. - */ - onClose?: ModalProps['onClose']; - PaperComponent?: ComponentType; - PaperProps?: Partial; -} - -export type ModalDialogClassKey = - | 'root' - | 'container' - | 'paper' - | 'closeButton'; - -const styles: Styles = { - root: {}, - closeButton: { - position: 'absolute', - top: 24, - right: 24, - }, - container: {}, - paper: { - position: 'relative', - }, -}; - -const ModalDialog = forwardRef< - // eslint-disable-next-line @typescript-eslint/no-explicit-any - any, - ModalDialogProps ->(function ModalDialog(props, ref) { - const { children, classes, closeable, onClose, ...other } = props; - - const handleCloseClick: IconButtonProps['onClick'] = (event) => { - if (onClose) { - onClose(event, 'closeClick'); - } - }; - - return ( - - {closeable ? ( - - - - ) : null} - - {children} - - ); -}); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_ModalDialog', -})(ModalDialog) as typeof ModalDialog; diff --git a/libs/spark/src/alpha/ModalDialog/index.ts b/libs/spark/src/alpha/ModalDialog/index.ts deleted file mode 100644 index 3e536b5e8..000000000 --- a/libs/spark/src/alpha/ModalDialog/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ModalDialog'; -export * from './ModalDialog'; diff --git a/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.stories.tsx b/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.stories.tsx deleted file mode 100644 index d99a0a608..000000000 --- a/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { ModalDialogActionsProps } from '..'; -import { Button, ModalDialogActions } from '..'; - -export const _retyped = ModalDialogActions as typeof ModalDialogActions; - -export default { - title: '@ps/ModalDialogActions', - component: _retyped, - excludeStories: ['_retyped'], -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Children: Story = Template.bind({}); -Children.args = { - children: <>Children, -}; -Children.storyName = 'children'; - -export const SecondaryAndPrimary: Story = Template.bind({}); -SecondaryAndPrimary.args = { - children: ( - <> - - - - ), -}; -SecondaryAndPrimary.storyName = 'Secondary & Primary'; diff --git a/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.test.tsx b/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.test.tsx deleted file mode 100644 index 65a679b18..000000000 --- a/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import ModalDialogActions from './ModalDialogActions'; - -describe('ModalDialogActions', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.tsx b/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.tsx deleted file mode 100644 index 6690fedce..000000000 --- a/libs/spark/src/alpha/ModalDialogActions/ModalDialogActions.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import clsx from 'clsx'; -import type { HTMLAttributes, ReactNode } from 'react'; -import React, { forwardRef } from 'react'; -import type { StandardProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface ModalDialogActionsProps - extends StandardProps< - HTMLAttributes, - ModalDialogActionsClassKey - > { - /** - * The content of the component. - */ - children?: ReactNode; -} - -export type ModalDialogActionsClassKey = 'root'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - alignItems: 'center', - display: 'flex', - flex: '0 0 auto', - gap: 8, - justifyContent: 'flex-end', - padding: '8px 24px 24px 24px', - }, -}; - -const ModalDialogActions = forwardRef( - function ModalDialogActions(props, ref) { - const { classes, className, ...other } = props; - - return ( - // @ts-expect-error ref?? -
- ); - } -); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_ModalDialogActions', -})(ModalDialogActions) as typeof ModalDialogActions; diff --git a/libs/spark/src/alpha/ModalDialogActions/index.ts b/libs/spark/src/alpha/ModalDialogActions/index.ts deleted file mode 100644 index e0579330d..000000000 --- a/libs/spark/src/alpha/ModalDialogActions/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ModalDialogActions'; -export * from './ModalDialogActions'; diff --git a/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.stories.tsx b/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.stories.tsx deleted file mode 100644 index a5232675f..000000000 --- a/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { ModalDialogTitleProps } from '..'; -import { ModalDialogContent } from '..'; - -export const _retyped = ModalDialogContent as typeof ModalDialogContent; - -export default { - title: '@ps/ModalDialogContent', - component: _retyped, - excludeStories: ['_retyped'], -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Children: Story = Template.bind({}); -Children.args = { - children: <>Children, -}; -Children.storyName = 'children'; diff --git a/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.test.tsx b/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.test.tsx deleted file mode 100644 index 860d66f00..000000000 --- a/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import ModalDialogContent from './ModalDialogContent'; - -describe('ModalDialogContent', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.tsx b/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.tsx deleted file mode 100644 index 865f9e830..000000000 --- a/libs/spark/src/alpha/ModalDialogContent/ModalDialogContent.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import clsx from 'clsx'; -import type { HTMLAttributes, ReactNode } from 'react'; -import React, { forwardRef } from 'react'; -import type { StandardProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface ModalDialogContentProps - extends StandardProps< - HTMLAttributes, - ModalDialogContentClassKey - > { - /** - * The content of the component. - */ - children?: ReactNode; -} - -export type ModalDialogContentClassKey = 'root'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - flex: '1 1 auto', - WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling. - overflowY: 'auto', - padding: '8px 24px', - // dialog without title - '&:first-child': { - paddingTop: 20, - }, - }, -}; - -const ModalDialogContent = forwardRef( - function ModalDialogContent(props, ref) { - const { classes, className, ...other } = props; - - return ( - // @ts-expect-error ref?? -
- ); - } -); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_ModalDialogContent', -})(ModalDialogContent) as typeof ModalDialogContent; diff --git a/libs/spark/src/alpha/ModalDialogContent/index.ts b/libs/spark/src/alpha/ModalDialogContent/index.ts deleted file mode 100644 index 11c4e0a62..000000000 --- a/libs/spark/src/alpha/ModalDialogContent/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ModalDialogContent'; -export * from './ModalDialogContent'; diff --git a/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.stories.tsx b/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.stories.tsx deleted file mode 100644 index 52e4d1a73..000000000 --- a/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { ModalDialogContentTextProps } from '..'; -import { ModalDialogContentText } from '..'; - -export const _retyped = ModalDialogContentText as typeof ModalDialogContentText; - -export default { - title: '@ps/ModalDialogContentText', - component: _retyped, - excludeStories: ['_retyped'], -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Children: Story = Template.bind({}); -Children.args = { - children: <>Children, -}; -Children.storyName = 'children'; diff --git a/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.test.tsx b/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.test.tsx deleted file mode 100644 index 395c5a08e..000000000 --- a/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { render } from '@testing-library/react'; -import ModalDialogContentText from './ModalDialogContentText'; - -describe('ModalDialogContentText', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - Paragraph - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.tsx b/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.tsx deleted file mode 100644 index c2fd2b03b..000000000 --- a/libs/spark/src/alpha/ModalDialogContentText/ModalDialogContentText.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import type { TypographyTypeMap } from '../Typography'; -import Typography from '../Typography'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface ModalDialogContentTextTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = TypographyTypeMap['defaultComponent'] -> { - props: P & TypographyTypeMap['props']; - defaultComponent: D; - classKey: ModalDialogContentTextClassKey; -} - -export type ModalDialogContentTextProps< - D extends ElementType = ModalDialogContentTextTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type ModalDialogContentTextClassKey = 'root'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - marginBottom: 12, - }, -}; - -const ModalDialogContentText: OverridableComponent = - forwardRef(function ModalDialogContentText(props, ref) { - return ( - // @ts-expect-error ref?? - - ); - }); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_ModalDialogContentText', -})(ModalDialogContentText) as typeof ModalDialogContentText; diff --git a/libs/spark/src/alpha/ModalDialogContentText/index.ts b/libs/spark/src/alpha/ModalDialogContentText/index.ts deleted file mode 100644 index 833875262..000000000 --- a/libs/spark/src/alpha/ModalDialogContentText/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ModalDialogContentText'; -export * from './ModalDialogContentText'; diff --git a/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.stories.tsx b/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.stories.tsx deleted file mode 100644 index 0bfbe71f1..000000000 --- a/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { ModalDialogTitleProps } from '..'; -import { ModalDialogTitle } from '..'; - -export const _retyped = ModalDialogTitle as typeof ModalDialogTitle; - -export default { - title: '@ps/ModalDialogTitle', - component: _retyped, - excludeStories: ['_retyped'], -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Children: Story = Template.bind({}); -Children.args = { children: <>Children }; -Children.storyName = 'children'; diff --git a/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.test.tsx b/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.test.tsx deleted file mode 100644 index 6c1bda006..000000000 --- a/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import ModalDialogTitle from './ModalDialogTitle'; - -describe('ModalDialogTitle', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(Title); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.tsx b/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.tsx deleted file mode 100644 index d318d14ae..000000000 --- a/libs/spark/src/alpha/ModalDialogTitle/ModalDialogTitle.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import clsx from 'clsx'; -import type { HTMLAttributes, ReactNode } from 'react'; -import React, { forwardRef } from 'react'; -import type { TypographyProps } from '../Typography'; -import Typography from '../Typography'; -import type { StandardProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface ModalDialogTitleProps - extends StandardProps< - HTMLAttributes, - ModalDialogTitleClassKey - > { - /** - * The content of the component. - */ - children?: ReactNode; - /** - * Props applied to the `Typography` element. - */ - TypographyProps?: TypographyProps; -} - -export type ModalDialogTitleClassKey = 'root'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - flex: '0 0 auto', - margin: 0, - padding: '28px 24px 8px 24px', - // dialog with close button - '&:not(:first-child)': { - paddingRight: 68, - }, - }, -}; - -const ModalDialogTitle = forwardRef( - function ModalDialogTitle(props, ref) { - const { children, classes, className, TypographyProps, ...other } = props; - - return ( - // @ts-expect-error ref?? -
- {/* @ts-expect-error component?? */} - - {children} - -
- ); - } -); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_ModalDialogTitle', -})(ModalDialogTitle) as typeof ModalDialogTitle; diff --git a/libs/spark/src/alpha/ModalDialogTitle/index.ts b/libs/spark/src/alpha/ModalDialogTitle/index.ts deleted file mode 100644 index 8daa18956..000000000 --- a/libs/spark/src/alpha/ModalDialogTitle/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ModalDialogTitle'; -export * from './ModalDialogTitle'; diff --git a/libs/spark/src/alpha/Paper/Paper.stories.tsx b/libs/spark/src/alpha/Paper/Paper.stories.tsx deleted file mode 100644 index 119120a0f..000000000 --- a/libs/spark/src/alpha/Paper/Paper.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { PaperProps } from '..'; -import { Paper } from '..'; -import { containElevation } from '../../../stories'; - -export const _retyped = (props: PaperProps) => ; - -export default { - title: '@ps/Paper', - component: _retyped, - decorators: [containElevation], - excludeStories: ['_retyped'], - args: { - style: { height: 120, width: 120 }, - // mimic defaults - border: 'none', - radius: 'zero', - shadow: 'none', - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; diff --git a/libs/spark/src/alpha/Paper/Paper.test.tsx b/libs/spark/src/alpha/Paper/Paper.test.tsx deleted file mode 100644 index 296a3ca28..000000000 --- a/libs/spark/src/alpha/Paper/Paper.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import Paper from './Paper'; - -describe('Paper', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Paper/Paper.tsx b/libs/spark/src/alpha/Paper/Paper.tsx deleted file mode 100644 index a61e7de5d..000000000 --- a/libs/spark/src/alpha/Paper/Paper.tsx +++ /dev/null @@ -1,247 +0,0 @@ -import clsx from 'clsx'; -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import makeStyles from '../../makeStyles'; -import type { Borders } from '../theme/borders'; -import type { Palette } from '../theme/palette'; -import type { Radii } from '../theme/radii'; -import type { Shadows } from '../theme/shadows'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface PaperTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'div' -> { - props: P & { - /** - * Background color. - */ - bgcolor?: keyof Palette['background']; - /** - * Border styling. - */ - border?: keyof Borders; - /** - * Radius rounding. - */ - radius?: keyof Radii; - /** - * Shadow depth. - */ - shadow?: keyof Shadows; - }; - defaultComponent: D; - classKey: PaperClassKey; -} - -export type PaperProps< - D extends ElementType = PaperTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type PaperClassKey = 'root'; - -type PrivateClassKey = - | 'private-root-bgcolor-default' - | 'private-root-bgcolor-alternative' - | 'private-root-bgcolor-brand' - | 'private-root-bgcolor-inverse' - | 'private-root-bgcolor-overlay' - | 'private-root-border-none' - | 'private-root-border-transparent' - | 'private-root-border-subtle' - | 'private-root-border-standard' - | 'private-root-border-bold' - | 'private-root-border-selected' - | 'private-root-border-active' - | 'private-root-border-expanded' - | 'private-root-border-hover' - | 'private-root-border-focus' - | 'private-root-border-error' - | 'private-root-border-info' - | 'private-root-border-success' - | 'private-root-border-warning' - | 'private-root-radius-zero' - | 'private-root-radius-xs' - | 'private-root-radius-sm' - | 'private-root-radius-md' - | 'private-root-radius-lg' - | 'private-root-radius-xl' - | 'private-root-radius-full' - | 'private-root-shadow-none' - | 'private-root-shadow-E100' - | 'private-root-shadow-E200' - | 'private-root-shadow-E300' - | 'private-root-shadow-E400' - | 'private-root-shadow-E500'; - -const styles: Styles = (theme) => ({ - root: { - color: theme.palette_alpha.text.body, - }, - /* Private */ - 'private-root-bgcolor-default': { - backgroundColor: theme.palette_alpha.background.default, - }, - 'private-root-bgcolor-alternative': { - backgroundColor: theme.palette_alpha.background.alternative, - }, - 'private-root-bgcolor-brand': { - backgroundColor: theme.palette_alpha.background.brand, - }, - 'private-root-bgcolor-inverse': { - backgroundColor: theme.palette_alpha.background.inverse, - }, - 'private-root-bgcolor-overlay': { - backgroundColor: theme.palette_alpha.background.overlay, - }, - 'private-root-border-none': { - border: theme.borders_alpha.none, - }, - 'private-root-border-transparent': { - border: theme.borders_alpha.transparent, - }, - 'private-root-border-subtle': { - border: theme.borders_alpha.subtle, - }, - 'private-root-border-standard': { - border: theme.borders_alpha.standard, - }, - 'private-root-border-bold': { - border: theme.borders_alpha.bold, - }, - 'private-root-border-selected': { - border: theme.borders_alpha.selected, - }, - 'private-root-border-active': { - border: theme.borders_alpha.active, - }, - 'private-root-border-expanded': { - border: theme.borders_alpha.expanded, - }, - 'private-root-border-hover': { - border: theme.borders_alpha.hover, - }, - 'private-root-border-focus': { - border: theme.borders_alpha.focus, - }, - 'private-root-border-error': { - border: theme.borders_alpha.error, - }, - 'private-root-border-info': { - border: theme.borders_alpha.info, - }, - 'private-root-border-success': { - border: theme.borders_alpha.success, - }, - 'private-root-border-warning': { - border: theme.borders_alpha.warning, - }, - 'private-root-radius-zero': { - borderRadius: theme.radii_alpha.zero, - }, - 'private-root-radius-xs': { - borderRadius: theme.radii_alpha.xs, - }, - 'private-root-radius-sm': { - borderRadius: theme.radii_alpha.sm, - }, - 'private-root-radius-md': { - borderRadius: theme.radii_alpha.md, - }, - 'private-root-radius-lg': { - borderRadius: theme.radii_alpha.lg, - }, - 'private-root-radius-xl': { - borderRadius: theme.radii_alpha.xl, - }, - 'private-root-radius-full': { - borderRadius: theme.radii_alpha.full, - }, - 'private-root-shadow-none': { - boxShadow: theme.shadows_alpha.none, - }, - 'private-root-shadow-E100': { - boxShadow: theme.shadows_alpha.E100, - }, - 'private-root-shadow-E200': { - boxShadow: theme.shadows_alpha.E200, - }, - 'private-root-shadow-E300': { - boxShadow: theme.shadows_alpha.E300, - }, - 'private-root-shadow-E400': { - boxShadow: theme.shadows_alpha.E400, - }, - 'private-root-shadow-E500': { - boxShadow: theme.shadows_alpha.E500, - }, - 'private-root-shadow-focus': { - boxShadow: theme.shadows_alpha.focus, - }, - 'private-root-shadow-error': { - boxShadow: theme.shadows_alpha.error, - }, - 'private-root-shadow-info': { - boxShadow: theme.shadows_alpha.info, - }, - 'private-root-shadow-success': { - boxShadow: theme.shadows_alpha.success, - }, - 'private-root-shadow-warning': { - boxShadow: theme.shadows_alpha.warning, - }, -}); - -export const usePaperStyles = makeStyles(styles, { - name: 'MuiSpark_alpha_Paper', -}); - -const Paper: OverridableComponent = forwardRef(function Paper( - props, - ref -) { - const { - className, - classes, - // @ts-expect-error can't be picked up - component = 'div', - bgcolor = 'default', - border = 'none', - radius = 'zero', - shadow = 'none', - // intercept MUI props -- allows supplying as override component to things that expect a MUI paper props signature - // @ts-expect-error intercept - elevation, - // @ts-expect-error intercept - square, - // @ts-expect-error intercept - variant, - ...other - } = props; - - const Component = component as ElementType; - - return ( - - ); -}); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_Paper', -})(Paper) as typeof Paper; diff --git a/libs/spark/src/alpha/Paper/index.ts b/libs/spark/src/alpha/Paper/index.ts deleted file mode 100644 index d40fffd98..000000000 --- a/libs/spark/src/alpha/Paper/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Paper'; -export * from './Paper'; diff --git a/libs/spark/src/alpha/Radio/Radio.stories.tsx b/libs/spark/src/alpha/Radio/Radio.stories.tsx deleted file mode 100644 index ba063ff8e..000000000 --- a/libs/spark/src/alpha/Radio/Radio.stories.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { RadioProps } from '..'; -import { Radio } from '..'; -import { - containBoxShadowInline, - enableHooks, - sparkThemeProvider, - statefulValue, -} from '../../../stories'; - -export const _retyped = Radio as typeof Radio; - -export default { - title: '@ps/Radio', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [statefulValue, enableHooks, containBoxShadowInline], - args: { - inputProps: { 'aria-label': 'Label' }, - }, -} as Meta; - -type Story = DefaultStory; - -const Template = (args) => ; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const STP: Story = Template.bind({}); -STP.decorators = [sparkThemeProvider]; -STP.storyName = '(STP)'; - -export const Hover: Story = Template.bind({}); -Hover.parameters = { pseudo: { hover: true } }; -Hover.storyName = ':hover'; - -export const FocusVisible: Story = Template.bind({}); -FocusVisible.parameters = { pseudo: { focusVisible: true } }; -FocusVisible.storyName = ':focus-visible'; - -export const Disabled: Story = Template.bind({}); -Disabled.args = { disabled: true }; -Disabled.storyName = 'disabled'; - -export const DisabledHover: Story = Template.bind({}); -DisabledHover.args = { disabled: true }; -DisabledHover.parameters = { pseudo: { hover: true } }; -DisabledHover.storyName = 'disabled :hover'; - -export const DisabledError: Story = Template.bind({}); -DisabledError.args = { disabled: true, error: true }; -DisabledError.storyName = 'disabled error'; - -export const DisabledErrorHover: Story = Template.bind({}); -DisabledErrorHover.args = { disabled: true, error: true }; -DisabledErrorHover.parameters = { pseudo: { hover: true } }; -DisabledErrorHover.storyName = 'disabled error :hover'; - -export const Error: Story = Template.bind({}); -Error.args = { error: true }; -Error.storyName = 'error'; - -export const ErrorHover: Story = Template.bind({}); -ErrorHover.args = { error: true }; -ErrorHover.parameters = { pseudo: { hover: true } }; -ErrorHover.storyName = 'error :hover'; - -export const ErrorFocusVisible: Story = Template.bind({}); -ErrorFocusVisible.args = { error: true }; -ErrorFocusVisible.parameters = { pseudo: { focusVisible: true } }; -ErrorFocusVisible.storyName = 'error :focus-visible'; - -export const Checked: Story = Template.bind({}); -Checked.args = { checked: true }; -Checked.storyName = 'checked'; - -export const CheckedHover: Story = Template.bind({}); -CheckedHover.args = { checked: true }; -CheckedHover.parameters = { pseudo: { hover: true } }; -CheckedHover.storyName = 'checked :hover'; - -export const CheckedFocusVisible: Story = Template.bind({}); -CheckedFocusVisible.args = { checked: true }; -CheckedFocusVisible.parameters = { pseudo: { focusVisible: true } }; -CheckedFocusVisible.storyName = 'checked :focus-visible'; - -export const CheckedDisabled: Story = Template.bind({}); -CheckedDisabled.args = { checked: true, disabled: true }; -CheckedDisabled.storyName = 'checked disabled'; - -export const CheckedDisabledHover: Story = Template.bind({}); -CheckedDisabledHover.args = { checked: true, disabled: true }; -CheckedDisabledHover.parameters = { pseudo: { hover: true } }; -CheckedDisabledHover.storyName = 'checked disabled :hover'; - -export const CheckedDisabledError: Story = Template.bind({}); -CheckedDisabledError.args = { checked: true, disabled: true, error: true }; -CheckedDisabledError.storyName = 'checked disabled error'; - -export const CheckedDisabledErrorHover: Story = Template.bind({}); -CheckedDisabledErrorHover.args = { checked: true, disabled: true, error: true }; -CheckedDisabledErrorHover.parameters = { pseudo: { hover: true } }; -CheckedDisabledErrorHover.storyName = 'checked disabled error :hover'; - -export const CheckedError: Story = Template.bind({}); -CheckedError.args = { checked: true, error: true }; -CheckedError.storyName = 'checked error'; - -export const CheckedErrorHover: Story = Template.bind({}); -CheckedErrorHover.args = { checked: true, error: true }; -CheckedErrorHover.parameters = { pseudo: { hover: true } }; -CheckedErrorHover.storyName = 'checked error :hover'; - -export const CheckedErrorFocusVisible: Story = Template.bind({}); -CheckedErrorFocusVisible.args = { checked: true, error: true }; -CheckedErrorFocusVisible.parameters = { pseudo: { focusVisible: true } }; -CheckedErrorFocusVisible.storyName = 'checked error :focus-visible'; diff --git a/libs/spark/src/alpha/Radio/Radio.test.tsx b/libs/spark/src/alpha/Radio/Radio.test.tsx deleted file mode 100644 index b6e0f438c..000000000 --- a/libs/spark/src/alpha/Radio/Radio.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import Radio from './Radio'; - -describe('Radio', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Radio/Radio.tsx b/libs/spark/src/alpha/Radio/Radio.tsx deleted file mode 100644 index 012790f67..000000000 --- a/libs/spark/src/alpha/Radio/Radio.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import type { Ref } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { RadioProps as MuiRadioProps } from '@material-ui/core/Radio'; -import { default as MuiRadio } from '@material-ui/core/Radio'; -import RadioIcon from './RadioIcon'; -import type { Styles, StyledComponentProps } from '../../withStyles'; -import withStyles from '../../withStyles'; -import useRadioGroupExtra from '../useRadioGroupExtra/useRadioGroupExtra'; - -export interface RadioProps - extends Omit< - MuiRadioProps, - | 'checkedIcon' - | 'classes' - | 'color' - | 'centerRipple' - | 'disableRipple' - | 'disableFocusRipple' - | 'disableTouchRipple' - | 'edge' - | 'focusRipple' - | 'icon' - | 'size' - | 'TouchRippleProps' - >, - StyledComponentProps { - /** - * If `true`, the component should be displayed in an error state. - */ - error?: boolean; -} - -export type RadioClassKey = 'root' | 'error'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - // unset Mui internal IconButton default - padding: 0, - backgroundColor: 'unset', - color: 'unset', - '&:hover': { - backgroundColor: 'unset', - color: 'unset', - }, - // unset PDS v1 - margin: 0, - }, - error: {}, -}; - -const Radio = forwardRef(function Radio(props, ref) { - const { classes, className, error, required: requiredProp, ...other } = props; - - const radioGroupExtra = useRadioGroupExtra(); - - let required = requiredProp; - - if (radioGroupExtra) { - if (typeof required === 'undefined') { - required = radioGroupExtra.required; - } - } - - return ( - } - classes={{ root: classes.root }} - className={clsx({ [classes.error]: error }, className)} - color="default" - disableFocusRipple - disableRipple - disableTouchRipple - focusRipple={false} - icon={} - ref={ref as Ref} - required={required} - {...other} - /> - ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_Radio' })( - Radio -) as typeof Radio; diff --git a/libs/spark/src/alpha/Radio/RadioIcon.tsx b/libs/spark/src/alpha/Radio/RadioIcon.tsx deleted file mode 100644 index 4612711ab..000000000 --- a/libs/spark/src/alpha/Radio/RadioIcon.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import makeStyles from '../../makeStyles'; -import createSvgIcon from '../createSvgIcon'; - -const useStyles = makeStyles<'root' | 'checked' | 'circle' | 'dot'>( - (theme) => ({ - /* Styles applied to the root element. */ - root: { - display: 'flex', - position: 'relative' as const, - borderRadius: theme.radii_alpha.full, - color: theme.palette_alpha.neutral[200], - // Adjust for irregular svg size of radio unchecked button - height: 17, - width: 17, - '& > svg': { - height: 17, - width: 17, - }, - /* error */ - '.Mui-error &': { - boxShadow: theme.shadows_alpha.error, - color: theme.palette_alpha.red[700], - }, - /* focus-visible */ - '.Mui-focusVisible &, input:focus-visible ~ &': { - boxShadow: theme.shadows_alpha.focus, - }, - /* disabled */ - 'input:disabled ~ &&&': { - boxShadow: theme.shadows_alpha.none, // can be present from `error` - color: theme.palette_alpha.neutral[90], - }, - }, - /* Styles applied to the root element when `checked={true}`. */ - checked: { - color: theme.palette_alpha.blue[600], - /* hover */ - 'input:hover ~ &, label:hover ~ &': { - color: theme.palette_alpha.blue[400], - }, - /* error */ - '.Mui-error &': { - color: theme.palette_alpha.red[600], - }, - /* error & hover */ - '.Mui-error input:hover ~ &, .Mui-error label:hover ~ &': { - color: theme.palette_alpha.red[400], - }, - }, - /* Styles applied to the circle icon element. */ - circle: { - borderRadius: theme.radii_alpha.full, - transform: 'scale(1)', // (from Mui) Scale applied to prevent dot misalignment in Safari - /* hover */ - 'input:hover ~ $root > &, label:hover ~ $root > &': { - backgroundColor: theme.palette_alpha.neutral[70], - }, - /* checked & hover */ - 'input:hover ~ $checked > &, label:hover ~ $checked > &': { - backgroundColor: 'unset', - }, - /* focus-visible */ - '.Mui-focusVisible $root > &, input:focus-visible ~ $root > &': { - backgroundColor: 'unset', // unset Mui default - }, - /* disabled */ - 'input:disabled ~ $root > &': { - backgroundColor: theme.palette_alpha.neutral[80], - }, - /* disabled & checked */ - 'input:disabled ~ $root$checked > &': { - backgroundColor: 'unset', - }, - }, - /* Styles applied to the dot icon element. */ - dot: { - backgroundColor: 'transparent', - position: 'absolute' as const, - left: 0, - transform: 'scale(0)', - transition: theme.transitions.create('transform', { - easing: theme.transitions.easing.easeIn, - duration: theme.transitions.duration.shortest, - }), - /* checked */ - '$checked > &': { - transform: 'scale(1)', - transition: theme.transitions.create('transform', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.shortest, - }), - }, - /* error */ - '.Mui-error $root > &': { - color: theme.palette_alpha.red[600], - }, - /* error & hover */ - '.Mui-error input:hover ~ $root > &, .Mui-error label:hover ~ $root > &': - { - color: theme.palette_alpha.red[400], - }, - /* disabled */ - 'input:disabled ~ $root > &&': { - color: theme.palette_alpha.neutral[90], - }, - }, - error: {}, - }), - { name: 'MuiSpark_alpha_RadioIcon' } -); - -const RadioCircle = createSvgIcon( - , - 'RadioCircle', - '0 0 17 17' -); - -const RadioDot = createSvgIcon( - , - 'RadioDot', - '0 0 17 17' -); - -const RadioIcon = (props: { checked?: boolean }) => { - const { checked } = props; - - const classes = useStyles(); - - return ( - - - - - ); -}; - -export default RadioIcon; diff --git a/libs/spark/src/alpha/Radio/index.ts b/libs/spark/src/alpha/Radio/index.ts deleted file mode 100644 index 9aef9464b..000000000 --- a/libs/spark/src/alpha/Radio/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Radio'; -export * from './Radio'; diff --git a/libs/spark/src/alpha/RadioField/RadioField.stories.tsx b/libs/spark/src/alpha/RadioField/RadioField.stories.tsx deleted file mode 100644 index dbe213ec0..000000000 --- a/libs/spark/src/alpha/RadioField/RadioField.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { RadioFieldProps } from '..'; -import { RadioField } from '..'; -import { containBoxShadowInline } from '../../../stories'; - -export const _retyped = RadioField as typeof RadioField; - -export default { - title: '@ps/RadioField', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [containBoxShadowInline], -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Label: Story = Template.bind({}); -Label.args = { label: 'Label' }; -Label.storyName = 'label'; - -export const LabelHelperText: Story = Template.bind({}); -LabelHelperText.args = { label: 'Label', helperText: 'Helper text' }; -LabelHelperText.storyName = 'label helperText'; - -export const LabelHelperTextDisabled: Story = Template.bind({}); -LabelHelperTextDisabled.args = { - label: 'Label', - helperText: 'Helper text', - disabled: true, -}; -LabelHelperTextDisabled.storyName = 'label helperText disabled'; - -export const LabelHelperTextError: Story = Template.bind({}); -LabelHelperTextError.args = { - label: 'Label', - helperText: 'Helper text', - error: true, -}; -LabelHelperTextError.storyName = 'label helperText error'; diff --git a/libs/spark/src/alpha/RadioField/RadioField.test.tsx b/libs/spark/src/alpha/RadioField/RadioField.test.tsx deleted file mode 100644 index 0cb901bac..000000000 --- a/libs/spark/src/alpha/RadioField/RadioField.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { render } from '@testing-library/react'; -import RadioField from './RadioField'; - -describe('RadioField', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/RadioField/RadioField.tsx b/libs/spark/src/alpha/RadioField/RadioField.tsx deleted file mode 100644 index 4bfa0ceec..000000000 --- a/libs/spark/src/alpha/RadioField/RadioField.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import type { ReactNode } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { FormControlLabelProps } from '../FormControlLabel'; -import FormControlLabel from '../FormControlLabel'; -import type { FormHelperTextProps } from '../FormHelperText'; -import FormHelperText from '../FormHelperText'; -import Radio from '../Radio/Radio'; -import { useId } from '../../utils'; -import type { StyledComponentProps, Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface RadioFieldProps - extends Omit, - StyledComponentProps { - /** - * If `true`, the label will be displayed in an error state. - */ - error?: boolean; - /** - * Props applied to the `FormHelperText` element. - */ - FormHelperTextProps?: Partial; - /** - * The helper text content. - */ - helperText?: ReactNode; - /** - * The `id` attribute of the `FormControlLabel` element. - */ - id?: string; -} - -type RadioFieldClassKey = 'root' | 'helperText'; - -const styles: Styles = { - /** Styles applied to the root element. */ - root: { - display: 'inline-flex', - flexDirection: 'column', - gap: 4, - }, - /** Styles applied to the helper text element. */ - helperText: { - marginLeft: 17 + 8, // control + gap - }, -}; - -const RadioField = forwardRef(function RadioField( - props, - ref -) { - const { - className, - classes, - disabled, - error, - FormHelperTextProps, - helperText, - id: idProp, - ...other - } = props; - - const id = useId(idProp); - - const helperTextId = helperText && id ? `${id}-helper-text` : undefined; - - return ( -
- } - disabled={disabled} - error={error} - ref={ref} - {...other} - /> - - {helperText ? ( - - {helperText} - - ) : null} -
- ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_RadioField' })( - RadioField -) as typeof RadioField; diff --git a/libs/spark/src/alpha/RadioField/index.ts b/libs/spark/src/alpha/RadioField/index.ts deleted file mode 100644 index cf34418a2..000000000 --- a/libs/spark/src/alpha/RadioField/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './RadioField'; -export * from './RadioField'; diff --git a/libs/spark/src/alpha/RadioGroup/RadioGroup.stories.tsx b/libs/spark/src/alpha/RadioGroup/RadioGroup.stories.tsx deleted file mode 100644 index 361490c67..000000000 --- a/libs/spark/src/alpha/RadioGroup/RadioGroup.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { RadioGroupProps } from '..'; -import { RadioField, RadioGroup } from '..'; -import { containBoxShadow, sparkThemeProvider } from '../../../stories'; - -export const _retyped = RadioGroup as typeof RadioGroup; - -export default { - title: '@ps/RadioGroup', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [containBoxShadow], - argTypes: { - children: { - control: 'select', - options: ['(RadioFields)'], - mapping: { - '(RadioFields)': ( - <> - - - - - - ), - }, - }, - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const ChildrenRadioFields: Story = Template.bind({}); -ChildrenRadioFields.args = { children: '(RadioFields)' }; -ChildrenRadioFields.storyName = 'children=(RadioFields)'; - -export const ChildrenRadioFieldsSTP: Story = Template.bind({}); -ChildrenRadioFieldsSTP.args = { children: '(RadioFields)' }; -ChildrenRadioFieldsSTP.decorators = [sparkThemeProvider]; -ChildrenRadioFieldsSTP.storyName = 'children=(RadioFields) (STP)'; - -export const ChildrenRadioFieldsDefaultValue: Story = Template.bind({}); -ChildrenRadioFieldsDefaultValue.args = { - children: '(RadioFields)', - defaultValue: 'value-2', -}; -ChildrenRadioFieldsDefaultValue.storyName = - 'children=(RadioFields) defaultValue'; - -export const ChildrenRadioFieldsRequired: Story = Template.bind({}); -ChildrenRadioFieldsRequired.args = { - children: '(RadioFields)', - required: true, -}; -ChildrenRadioFieldsRequired.storyName = 'children=(RadioFields) required'; - -export const ChildrenRadioFieldsRow: Story = Template.bind({}); -ChildrenRadioFieldsRow.args = { - children: '(RadioFields)', - row: true, -}; -ChildrenRadioFieldsRow.storyName = 'children=(RadioFields) row'; diff --git a/libs/spark/src/alpha/RadioGroup/RadioGroup.test.tsx b/libs/spark/src/alpha/RadioGroup/RadioGroup.test.tsx deleted file mode 100644 index 9139a3d75..000000000 --- a/libs/spark/src/alpha/RadioGroup/RadioGroup.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import RadioGroup from './RadioGroup'; - -describe('RadioGroup', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/RadioGroup/RadioGroup.tsx b/libs/spark/src/alpha/RadioGroup/RadioGroup.tsx deleted file mode 100644 index 227a42cc5..000000000 --- a/libs/spark/src/alpha/RadioGroup/RadioGroup.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { forwardRef } from 'react'; -import type { RadioGroupProps as MuiRadioGroupProps } from '@material-ui/core/RadioGroup'; -import MuiRadioGroup from '@material-ui/core/RadioGroup'; -import RadioGroupExtraContext from '../RadioGroupExtraContext'; -import { formControlState } from '../FormControl'; -import useFormControl from '../useFormControl'; -import type { StyledComponentProps, Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface RadioGroupProps - extends Omit, - StyledComponentProps { - /** - * If `true`, then descendant controls (i.e. `input` elements) will be required. - */ - required?: boolean; -} - -export type RadioGroupClassKey = 'root'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - gap: 16, - width: 'fit-content', - }, -}; - -const RadioGroup = forwardRef(function RadioGroup( - props, - ref -) { - const { - classes, - // underscored props will be processed directly from `props` by `formControlState` below - required: _required, - ...other - } = props; - - const fc = useFormControl(); - const fcs = formControlState({ - props, - muiFormControl: fc, - states: ['error', 'required'], - }); - - return ( - - - - ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_RadioGroup' })( - RadioGroup -) as typeof RadioGroup; diff --git a/libs/spark/src/alpha/RadioGroup/index.ts b/libs/spark/src/alpha/RadioGroup/index.ts deleted file mode 100644 index e7e280f41..000000000 --- a/libs/spark/src/alpha/RadioGroup/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './RadioGroup'; -export * from './RadioGroup'; diff --git a/libs/spark/src/alpha/RadioGroupExtraContext/RadioGroupExtraContext.ts b/libs/spark/src/alpha/RadioGroupExtraContext/RadioGroupExtraContext.ts deleted file mode 100644 index ca5389d83..000000000 --- a/libs/spark/src/alpha/RadioGroupExtraContext/RadioGroupExtraContext.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { createContext } from 'react'; - -export interface RadioGroupExtraContextValue { - /** - * If `true`, then descendant controls (i.e. `input` elements) will be required. - */ - required?: boolean; -} - -const RadioGroupExtraContext = createContext({ - required: false, -}); - -if (process.env.NODE_ENV !== 'production') { - RadioGroupExtraContext.displayName = 'RadioGroupExtraContext'; -} - -export default RadioGroupExtraContext; diff --git a/libs/spark/src/alpha/RadioGroupExtraContext/index.ts b/libs/spark/src/alpha/RadioGroupExtraContext/index.ts deleted file mode 100644 index 5d1c394ea..000000000 --- a/libs/spark/src/alpha/RadioGroupExtraContext/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './RadioGroupExtraContext'; -export * from './RadioGroupExtraContext'; diff --git a/libs/spark/src/alpha/RadioGroupField/RadioGroupField.stories.tsx b/libs/spark/src/alpha/RadioGroupField/RadioGroupField.stories.tsx deleted file mode 100644 index c17402b06..000000000 --- a/libs/spark/src/alpha/RadioGroupField/RadioGroupField.stories.tsx +++ /dev/null @@ -1,248 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { RadioGroupFieldProps } from '..'; -import { RadioField, RadioGroupField } from '..'; -import { containBoxShadow, Info } from '../../../stories'; - -export const _retyped = RadioGroupField as typeof RadioGroupField; - -export default { - title: '@ps/RadioGroupField', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [containBoxShadow], - argTypes: { - children: { - control: 'select', - options: ['(RadioFields)', '(RadioFields helperText)'], - mapping: { - '(RadioFields)': ( - <> - - - - - - ), - '(RadioFields helperText)': ( - <> - - -
  • Helping line item one
    • -
  • Helping line item two
    • -
  • Helping line item three
    • - - } - label="Label two" - value="value-2" - /> - , - }} - helperText={ - - More help: -
      -
    1. Helping line item
      2. -
    2. Helping line item
      3. -
    3. Helping line item
      4. -
    -     - } - label="Label three" - value="value-3" - /> - - - ), - }, - }, - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const LabelHelperText: Story = Template.bind({}); -LabelHelperText.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', -}; -LabelHelperText.storyName = 'children=(RadioFields) label helperText'; - -export const LabelHelperTextDefaultValue: Story = Template.bind({}); -LabelHelperTextDefaultValue.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - defaultValue: 'value-1', -}; -LabelHelperTextDefaultValue.storyName = - 'children=(RadioFields) label helperText defaultValue'; - -export const LabelHelperTextDisabled: Story = Template.bind({}); -LabelHelperTextDisabled.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - disabled: true, -}; -LabelHelperTextDisabled.storyName = - 'children=(RadioFields) label helperText disabled'; - -export const LabelHelperTextError: Story = Template.bind({}); -LabelHelperTextError.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - error: true, -}; -LabelHelperTextError.storyName = - 'children=(RadioFields) label helperText error'; - -export const LabelHelperTextErrorDisabled: Story = Template.bind({}); -LabelHelperTextErrorDisabled.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - error: true, - disabled: true, -}; -LabelHelperTextErrorDisabled.storyName = - 'children=(RadioFields) label helperText error disabled'; - -export const LabelHelperTextFullWidth: Story = Template.bind({}); -LabelHelperTextFullWidth.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - fullWidth: true, -}; -LabelHelperTextFullWidth.storyName = - 'children=(RadioFields) label helperText fullWidth'; - -export const LabelHelperTextRequired: Story = Template.bind({}); -LabelHelperTextRequired.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - required: true, -}; -LabelHelperTextRequired.storyName = - 'children=(RadioFields) label helperText required'; - -export const LabelHelperTextRequiredError: Story = Template.bind({}); -LabelHelperTextRequiredError.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - required: true, - error: true, -}; -LabelHelperTextRequiredError.storyName = - 'children=(RadioFields) label helperText required error'; - -export const LabelHelperTextRequiredErrorDisabled: Story = Template.bind({}); -LabelHelperTextRequiredErrorDisabled.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - required: true, - error: true, - disabled: true, -}; -LabelHelperTextRequiredErrorDisabled.storyName = - 'children=(RadioFields) label helperText required error disabled'; - -export const LabelHelperTextRow: Story = Template.bind({}); -LabelHelperTextRow.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - row: true, -}; -LabelHelperTextRow.storyName = 'children=(RadioFields) label helperText row'; - -export const LabelHelperTextRowFullWidth: Story = Template.bind({}); -LabelHelperTextRowFullWidth.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - row: true, - fullWidth: true, -}; -LabelHelperTextRowFullWidth.storyName = - 'children=(RadioFields) label helperText row fullWidth'; - -export const LabelHelperTextValue: Story = Template.bind({}); -LabelHelperTextValue.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - value: 'value-1', -}; -LabelHelperTextValue.storyName = - 'children=(RadioFields) label helperText value'; - -export const LabelHelperTextValueDisabled: Story = Template.bind({}); -LabelHelperTextValueDisabled.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - value: 'value-1', - disabled: true, -}; -LabelHelperTextValueDisabled.storyName = - 'children=(RadioFields) label helperText value disabled'; - -export const LabelHelperTextValueError: Story = Template.bind({}); -LabelHelperTextValueError.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - value: 'value-1', - error: true, -}; -LabelHelperTextValueError.storyName = - 'children=(RadioFields) label helperText value error'; - -export const LabelHelperTextValueErrorDisabled: Story = Template.bind({}); -LabelHelperTextValueErrorDisabled.args = { - children: '(RadioFields)', - label: 'Label', - helperText: 'Helper text', - value: 'value-1', - error: true, - disabled: true, -}; -LabelHelperTextValueErrorDisabled.storyName = - 'children=(RadioFields) label helperText value error disabled'; - -export const Children2LabelHelperText: Story = Template.bind({}); -Children2LabelHelperText.args = { - children: '(RadioFields helperText)', - label: 'Label', - helperText: 'Helper text', -}; -Children2LabelHelperText.storyName = - 'children=(RadioFields helperText) label helperText'; diff --git a/libs/spark/src/alpha/RadioGroupField/RadioGroupField.test.tsx b/libs/spark/src/alpha/RadioGroupField/RadioGroupField.test.tsx deleted file mode 100644 index 3fd45f1fd..000000000 --- a/libs/spark/src/alpha/RadioGroupField/RadioGroupField.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render } from '@testing-library/react'; -import RadioGroupField from './RadioGroupField'; - -describe('RadioGroupField', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/RadioGroupField/RadioGroupField.tsx b/libs/spark/src/alpha/RadioGroupField/RadioGroupField.tsx deleted file mode 100644 index d9e0182b1..000000000 --- a/libs/spark/src/alpha/RadioGroupField/RadioGroupField.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import type { ReactNode, RefObject } from 'react'; -import React, { forwardRef } from 'react'; -import type { FormControlProps } from '../FormControl'; -import FormControl from '../FormControl'; -import type { FormHelperTextProps } from '../FormHelperText'; -import FormHelperText from '../FormHelperText'; -import type { FormLabelProps } from '../FormLabel'; -import FormLabel from '../FormLabel'; -import type { RadioGroupProps } from '../RadioGroup'; -import RadioGroup from '../RadioGroup'; -import { useId } from '../../utils'; - -export interface RadioGroupFieldProps - extends Omit { - /** - * @ignore - */ - children: ReactNode; - /** - * The default value of the `RadioGroup` element. - */ - defaultValue?: RadioGroupProps['defaultValue']; - /** - * Props applied to the `FormHelperText` element. - */ - FormHelperTextProps?: Partial; - /** - * Props applied to the `FormLabel` element. - */ - FormLabelProps?: Partial; - /** - * The helper text content. - */ - helperText?: ReactNode; - /** - * The label content. - */ - label?: ReactNode; - /** - * The `name` attribute passed to the controls. - */ - name?: string; - /** - * Callback fired when the value is changed. - * - * @param {object} event The event source of the callback. - * You can pull out the new value by accessing `event.target.value` (string). - */ - onChange?: RadioGroupProps['onChange']; - /** - * Props applied to the `RadioGroup` element. - */ - RadioGroupProps?: Partial; - /** - * Display the `RadioGroup` in a row. - */ - row?: boolean; - /** - * The value of the `RadioGroup` element; required for a controlled component. - */ - value?: unknown; -} - -const RadioGroupField = forwardRef( - function RadioGroupField(props, ref) { - const { - children, - defaultValue, - FormHelperTextProps, - FormLabelProps, - helperText, - id: idProp, - label, - name, - onChange, - RadioGroupProps, - row, - value, - ...other - } = props; - - const id = useId(idProp); - - const helperTextId = helperText && id ? `${id}-helper-text` : undefined; - const labelId = label && id ? `${id}-label` : undefined; - - return ( - } - {...(helperTextId && { 'aria-describedby': helperTextId })} - {...(labelId && { 'aria-labelledby': labelId })} - {...other} - > - {label ? {label} : null} - - - {children} - - - {helperText ? ( - {helperText} - ) : null} - - ); - } -); - -export default RadioGroupField; diff --git a/libs/spark/src/alpha/RadioGroupField/index.ts b/libs/spark/src/alpha/RadioGroupField/index.ts deleted file mode 100644 index d909b5d03..000000000 --- a/libs/spark/src/alpha/RadioGroupField/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './RadioGroupField'; -export * from './RadioGroupField'; diff --git a/libs/spark/src/alpha/SectionMessage/SectionMessage.stories.tsx b/libs/spark/src/alpha/SectionMessage/SectionMessage.stories.tsx deleted file mode 100644 index c8aac7e2f..000000000 --- a/libs/spark/src/alpha/SectionMessage/SectionMessage.stories.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { SectionMessageProps } from '..'; -import { SectionMessage } from '..'; - -export default { - title: '@ps/SectionMessage', - component: SectionMessage, - args: { - children: <>Lorem ipsum dolor sit amet, consectetur adipiscing elit., - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const SeverityInfo: Story = Template.bind({}); -SeverityInfo.args = { severity: 'info' }; -SeverityInfo.storyName = 'severity=info'; - -const onClose = () => { - return; -}; - -export const SeverityInfoOnClose: Story = Template.bind({}); -SeverityInfoOnClose.args = { severity: 'info', onClose }; -SeverityInfoOnClose.storyName = 'severity=info onClose'; - -export const SeverityInfoOnCloseTitle: Story = Template.bind({}); -SeverityInfoOnCloseTitle.args = { - title: 'Info', - severity: 'info', - onClose, -}; -SeverityInfoOnCloseTitle.storyName = 'severity=info onClose title'; - -export const SeverityWarning: Story = Template.bind({}); -SeverityWarning.args = { severity: 'warning' }; -SeverityWarning.storyName = 'severity=warning'; - -export const SeverityWarningOnClose: Story = Template.bind({}); -SeverityWarningOnClose.args = { - severity: 'warning', - onClose, -}; -SeverityWarningOnClose.storyName = 'severity=warning onClose'; - -export const SeverityWarningOnCloseTitle: Story = Template.bind({}); -SeverityWarningOnCloseTitle.args = { - title: 'Warning', - severity: 'warning', - onClose, -}; -SeverityWarningOnCloseTitle.storyName = 'severity=warning onClose title'; - -export const SeveritySuccess: Story = Template.bind({}); -SeveritySuccess.args = { severity: 'success' }; -SeveritySuccess.storyName = 'severity=success'; - -export const SeveritySuccessOnClose: Story = Template.bind({}); -SeveritySuccessOnClose.args = { - severity: 'success', - onClose, -}; -SeveritySuccessOnClose.storyName = 'severity=success onClose'; - -export const SeveritySuccessOnCloseTitle: Story = Template.bind({}); -SeveritySuccessOnCloseTitle.args = { - title: 'Success', - severity: 'success', - onClose, -}; -SeveritySuccessOnCloseTitle.storyName = 'severity=success onClose title'; - -export const SeverityError: Story = Template.bind({}); -SeverityError.args = { severity: 'error' }; -SeverityError.storyName = 'severity=error'; - -export const SeverityErrorOnClose: Story = Template.bind({}); -SeverityErrorOnClose.args = { - severity: 'error', - onClose, -}; -SeverityErrorOnClose.storyName = 'severity=error onClose'; - -export const SeverityErrorOnCloseTitle: Story = Template.bind({}); -SeverityErrorOnCloseTitle.args = { - title: 'Error', - severity: 'error', - onClose, -}; -SeverityErrorOnCloseTitle.storyName = 'severity=error onClose title'; diff --git a/libs/spark/src/alpha/SectionMessage/SectionMessage.test.tsx b/libs/spark/src/alpha/SectionMessage/SectionMessage.test.tsx deleted file mode 100644 index 4fea35443..000000000 --- a/libs/spark/src/alpha/SectionMessage/SectionMessage.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { render } from '@testing-library/react'; -import SectionMessage from './SectionMessage'; - -describe('SectionMessage', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - Message. - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/SectionMessage/SectionMessage.tsx b/libs/spark/src/alpha/SectionMessage/SectionMessage.tsx deleted file mode 100644 index 3dcb2d8d4..000000000 --- a/libs/spark/src/alpha/SectionMessage/SectionMessage.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import type { ReactNode } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { AlertClassKey, AlertProps } from '../internal/Alert'; -import Alert from '../internal/Alert'; -import type { StandardProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface SectionMessageProps - extends StandardProps { - /** - * Display a formatted title above the section message. - */ - title?: ReactNode; -} - -export type SectionMessageClassKey = AlertClassKey | 'title'; - -type PrivateClassKey = - | 'private-root-severity-error' - | 'private-root-severity-info' - | 'private-root-severity-success' - | 'private-root-severity-warning' - | 'private-icon-severity-error' - | 'private-icon-severity-info' - | 'private-icon-severity-success' - | 'private-icon-severity-warning'; - -const styles: Styles = (theme) => ({ - root: { - alignItems: 'flex-start', - borderRadius: theme.radii_alpha.sm, - display: 'flex', - gap: 16, - padding: 24, - border: theme.borders_alpha.bold, - [theme.breakpoints.down('sm')]: { - gap: 12, - padding: 18, - }, - }, - icon: { - display: 'flex', - fontSize: theme.typography_alpha.pxToRem(24), - lineHeight: 1, - }, - message: { - ...theme.typography_alpha.body, - color: theme.palette_alpha.text.body, - flexGrow: 2, - }, - action: { - alignSelf: 'flex-start', - justifySelf: 'flex-end', - }, - title: { - ...theme.typography_alpha.label, - color: theme.palette_alpha.text.heading, - marginBottom: 4, - }, - /* Private */ - 'private-root-severity-error': { - backgroundColor: theme.palette_alpha.red[100], - border: theme.borders_alpha.error, - }, - 'private-root-severity-info': { - backgroundColor: theme.palette_alpha.blue[100], - border: theme.borders_alpha.info, - }, - 'private-root-severity-success': { - backgroundColor: theme.palette_alpha.green[100], - border: theme.borders_alpha.success, - }, - 'private-root-severity-warning': { - backgroundColor: theme.palette_alpha.yellow[100], - border: theme.borders_alpha.warning, - }, - 'private-icon-severity-error': { - color: theme.palette_alpha.red[700], - }, - 'private-icon-severity-info': { - color: theme.palette_alpha.blue[600], - }, - 'private-icon-severity-success': { - color: theme.palette_alpha.green[600], - }, - 'private-icon-severity-warning': { - color: theme.palette_alpha.yellow[600], - }, -}); - -const SectionMessage = forwardRef( - function SectionMessage(props, ref) { - const { children, classes, severity = 'info', title, ...other } = props; - - return ( - - {title ?
    {title}
    : null} - - {children} -     - ); - } -); - -export default withStyles(styles, { name: 'MuiSpark_alpha_SectionMessage' })( - SectionMessage -) as typeof SectionMessage; diff --git a/libs/spark/src/alpha/SectionMessage/index.ts b/libs/spark/src/alpha/SectionMessage/index.ts deleted file mode 100644 index f87b7b258..000000000 --- a/libs/spark/src/alpha/SectionMessage/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SectionMessage'; -export * from './SectionMessage'; diff --git a/libs/spark/src/alpha/Select/Select.stories.tsx b/libs/spark/src/alpha/Select/Select.stories.tsx deleted file mode 100644 index 1bd837ed0..000000000 --- a/libs/spark/src/alpha/Select/Select.stories.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { SelectProps as _SelectProps } from '..'; -import { CheckboxMenuItem, MenuItem, Select } from '..'; -import { - containBoxShadow, - enableHooks, - Home3, - sparkThemeProvider, - statefulValue, -} from '../../../stories'; - -interface SelectProps extends _SelectProps { - disabled?: _SelectProps['disabled']; - displayEmpty?: _SelectProps['displayEmpty']; - error?: _SelectProps['error']; - open?: _SelectProps['open']; - leadingEl?: _SelectProps['leadingEl']; - success?: _SelectProps['success']; - value?: _SelectProps['value']; -} - -export const _retyped = (props: SelectProps) => ; - -type Story = DefaultStory< - SelectProps & { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - getTagProps: any; - } ->; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const STP: Story = Template.bind({}); -STP.decorators = [sparkThemeProvider]; -STP.storyName = '(STP)'; - -export const Hover: Story = Template.bind({}); -Hover.parameters = { pseudo: { hover: true } }; -Hover.storyName = ':hover'; - -export const FocusVisible: Story = Template.bind({}); -FocusVisible.parameters = { pseudo: { focusVisible: true } }; -FocusVisible.storyName = ':focus-visible'; - -export const Disabled: Story = Template.bind({}); -Disabled.args = { disabled: true }; -Disabled.storyName = 'disabled'; - -export const DisabledHover: Story = Template.bind({}); -DisabledHover.args = { disabled: true }; -DisabledHover.parameters = { pseudo: { hover: true } }; -DisabledHover.storyName = 'disabled :hover'; - -export const Error: Story = Template.bind({}); -Error.args = { error: true }; -Error.storyName = 'error'; - -export const FullWidth: Story = Template.bind({}); -FullWidth.args = { fullWidth: true }; -FullWidth.storyName = 'fullWidth'; - -export const LeadingEl: Story = Template.bind({}); -LeadingEl.args = { leadingEl: '' }; -LeadingEl.storyName = 'leadingEl'; - -export const LeadingElValue: Story = Template.bind({}); -LeadingElValue.args = { leadingEl: '', value: 'value-1' }; -LeadingElValue.storyName = 'leadingEl value'; - -export const SizeSmall: Story = Template.bind({}); -SizeSmall.args = { size: 'small' }; -SizeSmall.storyName = 'size="small"'; - -export const Success: Story = Template.bind({}); -Success.args = { success: true }; -Success.storyName = 'success'; - -export const Multiple: Story = Template.bind({}); -Multiple.args = { - value: [], - multiple: true, -}; -Multiple.storyName = 'multiple value=[]'; - -export const MultipleValues: Story = Template.bind({}); -MultipleValues.args = { - value: ['value-1', 'value-2'], - multiple: true, -}; -MultipleValues.storyName = 'multiple value=[...]'; - -export const Multiple4Values: Story = Template.bind({}); -Multiple4Values.args = { - value: ['value-1', 'value-2', 'value-3', 'value-4'], - multiple: true, -}; -Multiple4Values.storyName = 'multiple value=[...x4]'; - -export const MultipleValuesDisabled: Story = Template.bind({}); -MultipleValuesDisabled.args = { - value: ['value-1', 'value-2'], - multiple: true, - disabled: true, -}; -MultipleValuesDisabled.storyName = 'multiple value=[...] disabled'; - -export const MultipleValuesRenderValueAsTag: Story = Template.bind({}); -MultipleValuesRenderValueAsTag.args = { - value: ['value-1', 'value-2'], - multiple: true, - renderValueAsTag: true, -}; -MultipleValuesRenderValueAsTag.storyName = - 'multiple value=[...] renderValueAsTag'; - -export const MultipleValuesRenderValueAsTagDisabled: Story = Template.bind({}); -MultipleValuesRenderValueAsTagDisabled.args = { - value: ['value-1', 'value-2'], - multiple: true, - disabled: true, - renderValueAsTag: true, -}; -MultipleValuesRenderValueAsTagDisabled.storyName = - 'multiple value=[...] disabled renderValueAsTag'; - -export const MultipleValuesGetTagProps: Story = Template.bind({}); -MultipleValuesGetTagProps.args = { - value: ['value-1', 'value-2', 'value-3', 'value-4'], - multiple: true, - getTagProps: '(getValueLabels)', - renderValueAsTag: true, - preventMultipleOverflow: true, -}; -MultipleValuesGetTagProps.storyName = - 'multiple value=[...] getTagProps renderValueAsTag preventMultipleOverflow'; diff --git a/libs/spark/src/alpha/Select/Select.test.tsx b/libs/spark/src/alpha/Select/Select.test.tsx deleted file mode 100644 index b688742b0..000000000 --- a/libs/spark/src/alpha/Select/Select.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import MenuItem from '../MenuItem'; -import Select from './Select'; - -describe('Select', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Select/Select.tsx b/libs/spark/src/alpha/Select/Select.tsx deleted file mode 100644 index ca438a51f..000000000 --- a/libs/spark/src/alpha/Select/Select.tsx +++ /dev/null @@ -1,362 +0,0 @@ -import type { CSSProperties } from 'react'; -import React, { cloneElement, forwardRef } from 'react'; -import type { SelectProps as MuiSelectProps } from '@material-ui/core/Select'; -import type { SelectInputProps as MuiSelectInputProps } from '@material-ui/core/Select/SelectInput'; -import MuiSelectInput from '@material-ui/core/Select/SelectInput'; -import MuiNativeSelectInput, { - styles as nativeSelectStyles, -} from '@material-ui/core/NativeSelect/NativeSelect'; -import type { InputProps } from '../Input'; -import Input from '../Input'; -import type { StandardProps } from '../../utils'; -import clsx from 'clsx'; -import { ChevronDown } from '../../internal'; -import type { Theme } from '../../theme'; -import type { TagProps } from '../Tag'; -import Tag from '../Tag'; -import type { PaperProps } from '../Paper'; -import { usePaperStyles } from '../Paper'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; -import useFormControl from '../useFormControl'; - -declare module '@material-ui/core/NativeSelect/NativeSelect' { - export const styles: ( - theme: Theme - ) => Record< - 'root' | 'select' | 'selectMenu' | 'icon' | 'iconOpen' | 'nativeInput', - CSSProperties - >; -} - -export interface SelectProps - extends StandardProps< - Omit, - SelectClassKey, - 'value' | 'onChange' - >, - Pick, - Pick< - MuiSelectProps, - | 'autoWidth' - | 'children' - | 'defaultValue' - | 'displayEmpty' - | 'IconComponent' - | 'id' - | 'input' - | 'inputProps' - | 'labelId' - | 'multiple' - | 'native' - | 'onChange' - | 'onClose' - | 'onOpen' - | 'open' - | 'renderValue' - | 'SelectDisplayProps' - | 'value' - > { - /** - * Props applied to the `Menu` element. - */ - // Hide MUI's Paper Props, add PDS's Paper Props (which will be used to apply class names, not forward as props, since the component cannot be overridden). - MenuProps?: Partial< - Omit & { - PaperProps?: Partial; - } - >; - /** - * A tag props getter. Use to customize the props of `Tag`'s rendered when `renderValueAsTag={true}`. - */ - getTagProps?: ({ - value, - index, - }: { - value: MuiSelectProps['value']; - index: number; - }) => TagProps; - /** - * Prevent the render container from overflowing with multiple values or tags. - */ - preventMultipleOverflow?: boolean; - /** - * Render the value as Tag components. - */ - renderValueAsTag?: boolean; -} - -export type SelectClassKey = - | 'root' - | 'nativeInput' - | 'icon' - | 'iconOpen' - | 'menuPaper'; - -type PrivateClassKey = - | 'private-root-fullWidth' - | 'private-root-renderValueAsTag' - | 'private-root-renderValueAsTag-preventMultipleOverflow' - | 'private-icon-size-medium' - | 'private-icon-size-small'; - -const styles: Styles = (theme) => { - const styles = nativeSelectStyles(theme); - // disabled is no longer a rule - delete styles.icon['&$disabled']; - delete styles.select['&$disabled']; - // most browsers don't recognize this option and JSS warns about caught error (an IE11 fix anyway, which we don't support) - delete styles.select['&::-ms-expand']; - return { - root: { - ...styles.root, - ...styles.select, - ...styles.selectMenu, - '&&': { - paddingRight: 4 + 24 + 16, // spacing + icon + padding; override MUI - }, - '.MuiSpark_alpha_InputAdornment-root ~ &': { - paddingLeft: 14 + 24 + 8, - // adjust embedded Menu's anchor/transform position to edge when there's a startAdornment - marginLeft: -40, - }, - }, - nativeInput: { - ...styles.nativeInput, - }, - icon: { - ...styles.icon, - color: theme.palette_alpha.text.icon, - transition: 'transform 250ms ease', - /* disabled -- can get from internal context => can't condition on prop */ - '.Mui-disabled > &': { - color: theme.palette_alpha.text.disabled, - }, - }, - iconOpen: { - ...styles.iconOpen, - }, - menuPaper: { - marginTop: 4, - }, - /* Private */ - 'private-root-fullWidth': { - width: '100%', - }, - 'private-root-renderValueAsTag': { - paddingBottom: 8, - paddingTop: 8, - '& > div': { - display: 'flex', - flexWrap: 'wrap', - gap: 8, - }, - '& > .PrivateSelect-renderValueAsTagNoValue': { - paddingBottom: 4, - paddingTop: 4, - }, - }, - 'private-root-renderValueAsTag-preventMultipleOverflow': { - '& > div': { - flexWrap: 'nowrap', - overflowX: 'scroll', - whiteSpace: 'nowrap', - }, - }, - 'private-icon-size-medium': { - fontSize: theme.typography_alpha.pxToRem(24), - marginRight: 16, - top: 'calc(50% - 12px)', - }, - 'private-icon-size-small': { - fontSize: theme.typography_alpha.pxToRem(20), - marginRight: 8, - top: 'calc(50% - 10px)', - }, - }; -}; - -const Select = forwardRef(function Select(props, ref) { - const { - autoWidth = false, - children, - classes, - displayEmpty = true, - getTagProps, - IconComponent = ChevronDown, - input, - inputProps, - labelId: labelIdProp, - MenuProps = {} as SelectProps['MenuProps'], - multiple = false, - native = false, - onClose, - onOpen, - open, - preventMultipleOverflow = false, - renderValue: renderValueProp, - renderValueAsTag = false, - SelectDisplayProps, - value, - // form control - 'aria-describedby': ariaDescribedByProp, - disabled: disabledProp, - error: errorProp, - fullWidth: fullWidthProp, - id: idProp, - required: requiredProp, - size: sizeProp, - success: successProp, - ...other - } = props; - - const formControl = useFormControl({ - disabled: disabledProp, - error: errorProp, - fullWidth: fullWidthProp, - inputId: idProp, - required: requiredProp, - size: sizeProp, - success: successProp, - }); - - const { - getContentAnchorEl: getContentAnchorElMenuProp = null, - anchorOrigin: anchorOriginMenuProp = { - vertical: 'bottom', - horizontal: 'right', - }, - transformOrigin: transformOriginMenuProp = { - vertical: 'top', - horizontal: 'right', - }, - PaperProps: MenuPaperProps = {} as SelectProps['MenuProps']['PaperProps'], - } = MenuProps; - - const { - bgcolor: bgcolorMenuPaperProp = 'default', - border: borderMenuPaperProp = 'none', - className: classNameMenuPaperProp, - radius: radiusMenuPaperProp = 'sm', - shadow: shadowMenuPaperProp = 'E400', - ...otherMenuPaperProps - } = MenuPaperProps; - - const paperClasses = usePaperStyles(); - - const inputComponent = native ? MuiNativeSelectInput : MuiSelectInput; - - const InputComponent = input || ; - - let renderValue; - if (renderValueProp) { - renderValue = renderValueProp; - } else if (renderValueAsTag) { - renderValue = (selected: string[]) => { - if (selected.length) { - return ( -
    - {selected.map((value, index) => ( - // can't make deletable because Select's `onChange` isn't extensible enough; but consumer can implement custom logic through `getTagProps` - - ))} -
    - ); - } else { - return ( -
    - ); - } - }; - } - - return cloneElement(InputComponent, { - 'aria-describedby': formControl.helperTextId, - disabled: formControl.disabled, - error: formControl.error, - fullWidth: formControl.fullWidth, - inputComponent, - inputProps: { - children, - IconComponent, - type: undefined, // We render a select. We can ignore the type provided by the `Input`. - multiple, - ...(native - ? { id: formControl.inputId } - : { - autoWidth, - displayEmpty, - labelId: formControl.labelId, - MenuProps: { - ...MenuProps, - anchorOrigin: anchorOriginMenuProp, - getContentAnchorEl: getContentAnchorElMenuProp, - transformOrigin: transformOriginMenuProp, - PaperProps: { - ...otherMenuPaperProps, - className: clsx( - classes.menuPaper, - paperClasses.root, - paperClasses[`private-root-bgcolor-${bgcolorMenuPaperProp}`], - paperClasses[`private-root-border-${borderMenuPaperProp}`], - paperClasses[`private-root-radius-${radiusMenuPaperProp}`], - paperClasses[`private-root-shadow-${shadowMenuPaperProp}`], - classNameMenuPaperProp - ), - }, - }, - onClose, - onOpen, - open, - renderValue, - SelectDisplayProps: { - id: formControl.inputId, - ...SelectDisplayProps, - }, - }), - ...inputProps, - classes: { - root: clsx( - classes.root, - { - [classes['private-root-fullWidth']]: formControl.fullWidth, - [classes['private-root-renderValueAsTag']]: renderValueAsTag, - [classes['private-root-renderValueAsTag-preventMultipleOverflow']]: - renderValueAsTag && preventMultipleOverflow, - }, - inputProps?.classes?.root - ), - nativeInput: clsx( - classes.nativeInput, - inputProps?.classes?.nativeInput - ), - icon: clsx( - classes.icon, - inputProps?.classes?.icon, - classes[`private-icon-size-${formControl.size}`] - ), - iconOpen: clsx(classes.iconOpen, inputProps?.classes?.iconOpen), - }, - ...(input ? input.props.inputProps : {}), - }, - required: formControl.required, - size: formControl.size, - success: formControl.success, - value, - ref, - ...other, - }); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_Select' })( - Select -) as typeof Select; diff --git a/libs/spark/src/alpha/Select/index.ts b/libs/spark/src/alpha/Select/index.ts deleted file mode 100644 index 5981fab0f..000000000 --- a/libs/spark/src/alpha/Select/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Select'; -export * from './Select'; diff --git a/libs/spark/src/alpha/SideBarContext/SideBarContext.ts b/libs/spark/src/alpha/SideBarContext/SideBarContext.ts deleted file mode 100644 index 6525e89f4..000000000 --- a/libs/spark/src/alpha/SideBarContext/SideBarContext.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { createContext } from 'react'; - -export interface SideBarContextValue { - /** - * Open the side bar drawer. - */ - open: () => void; - /** - * Close the side bar drawer. - */ - close: () => void; - /** - * Whether the side bar drawer is open. - */ - isOpen: boolean; -} - -const SideBarContext = createContext(null); - -if (process.env.NODE_ENV !== 'production') { - SideBarContext.displayName = 'SideBarContext'; -} - -export default SideBarContext; diff --git a/libs/spark/src/alpha/SideBarContext/index.ts b/libs/spark/src/alpha/SideBarContext/index.ts deleted file mode 100644 index b547d9347..000000000 --- a/libs/spark/src/alpha/SideBarContext/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SideBarContext'; -export * from './SideBarContext'; diff --git a/libs/spark/src/alpha/SideBarDrawer/SideBarDrawer.spec.tsx b/libs/spark/src/alpha/SideBarDrawer/SideBarDrawer.spec.tsx deleted file mode 100644 index 99a606dd4..000000000 --- a/libs/spark/src/alpha/SideBarDrawer/SideBarDrawer.spec.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import SideBarProvider from '../SideBarProvider'; -import SideBarDrawer from './SideBarDrawer'; - -describe('SideBarDrawer', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/SideBarDrawer/SideBarDrawer.tsx b/libs/spark/src/alpha/SideBarDrawer/SideBarDrawer.tsx deleted file mode 100644 index 36d2a491b..000000000 --- a/libs/spark/src/alpha/SideBarDrawer/SideBarDrawer.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import clsx from 'clsx'; -import type { HTMLAttributes } from 'react'; -import React from 'react'; -import type { DrawerClassKey, DrawerProps } from '../Drawer'; -import Drawer from '../Drawer'; -import useMediaQuery from '../useMediaQuery'; -import useSideBar from '../useSideBar'; -import type { StandardProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface SideBarDrawerProps - extends StandardProps { - ContainerProps?: HTMLAttributes; -} - -export type SideBarDrawerClassKey = DrawerClassKey | 'container'; - -type PrivateClassKey = 'private-container-closed' | 'private-container-open'; - -const styles: Styles = (theme) => ({ - root: {}, - paper: { - padding: '8px 0', - }, - container: {}, - 'private-container-closed': { - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - }, - 'private-container-open': { - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - }, -}); - -const UnstyledSideBarDrawer = (props: SideBarDrawerProps) => { - const { - classes: classesProp, - ContainerProps, - variant: variantProp, - width: widthProp = 256, - ...other - } = props; - - const classes = classesProp as Exclude & - Record; - - const sideBar = useSideBar(); - const isMobile = useMediaQuery((theme) => theme.breakpoints.down('xs')); - - if (sideBar === null) { - throw new Error('Missing SideBarProvider'); - } - - const handleClose = () => { - sideBar.close(); - }; - - const variant: SideBarDrawerProps['variant'] = - variantProp !== undefined - ? variantProp - : isMobile - ? 'temporary' - : 'persistent'; - - const containerWidth = isMobile ? 0 : sideBar.isOpen ? widthProp : 0; - const drawerWidth = widthProp; - - return ( -
    - -
    - ); -}; - -const SideBarDrawer = withStyles(styles, { - name: 'MuiSpark_alpha_SideBarDrawer', -})(UnstyledSideBarDrawer) as typeof UnstyledSideBarDrawer; - -export default SideBarDrawer; diff --git a/libs/spark/src/alpha/SideBarDrawer/index.ts b/libs/spark/src/alpha/SideBarDrawer/index.ts deleted file mode 100644 index 114aff107..000000000 --- a/libs/spark/src/alpha/SideBarDrawer/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SideBarDrawer'; -export * from './SideBarDrawer'; diff --git a/libs/spark/src/alpha/SideBarList/SideBarList.spec.tsx b/libs/spark/src/alpha/SideBarList/SideBarList.spec.tsx deleted file mode 100644 index 6984397e3..000000000 --- a/libs/spark/src/alpha/SideBarList/SideBarList.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import SideBarList from './SideBarList'; - -describe('SideBarList', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/SideBarList/SideBarList.tsx b/libs/spark/src/alpha/SideBarList/SideBarList.tsx deleted file mode 100644 index 939ad570d..000000000 --- a/libs/spark/src/alpha/SideBarList/SideBarList.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ListClassKey, ListProps } from '../List'; -import List from '../List'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface SideBarListProps extends ListProps {} - -export type SideBarListClassKey = ListClassKey; - -const styles: Styles = { - root: {}, -}; - -const UnstyledSideBarList = List; - -const SideBarList = withStyles(styles, { - name: 'MuiSpark_alpha_SideBarList', -})(UnstyledSideBarList) as typeof UnstyledSideBarList; - -export default SideBarList; diff --git a/libs/spark/src/alpha/SideBarList/index.ts b/libs/spark/src/alpha/SideBarList/index.ts deleted file mode 100644 index a074b801a..000000000 --- a/libs/spark/src/alpha/SideBarList/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SideBarList'; -export * from './SideBarList'; diff --git a/libs/spark/src/alpha/SideBarListItem/SideBarListItem.spec.tsx b/libs/spark/src/alpha/SideBarListItem/SideBarListItem.spec.tsx deleted file mode 100644 index 31b114c4b..000000000 --- a/libs/spark/src/alpha/SideBarListItem/SideBarListItem.spec.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import SideBarProvider from '../SideBarProvider'; -import SideBarListItem from './SideBarListItem'; - -describe('SideBarListItem', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/SideBarListItem/SideBarListItem.tsx b/libs/spark/src/alpha/SideBarListItem/SideBarListItem.tsx deleted file mode 100644 index d62894fbe..000000000 --- a/libs/spark/src/alpha/SideBarListItem/SideBarListItem.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { alpha } from '@material-ui/core/styles'; -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import type { - ListItemClassKey, - ListItemProps, - ListItemTypeMap, -} from '../ListItem'; -import ListItem from '../ListItem'; -import useMediaQuery from '../useMediaQuery'; -import useSideBar from '../useSideBar'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import type { ExtendButtonBase } from '../../ButtonBase'; - -export type SideBarListItemTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'li' -> = Omit, 'props' | 'classKey'> & { - props: Omit['props'], 'onClick'>; -} & { - classKey: SideBarListItemClassKey; - props: P & { - /** - * :TODO: - */ - closeSideBarOnXsDown?: boolean; - }; -}; - -export type SideBarListItemProps< - D extends ElementType = SideBarListItemTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type SideBarListItemClassKey = Exclude; - -const styles: Styles = (theme) => ({ - root: { - paddingBottom: 6, - paddingLeft: 24, - paddingTop: 6, - '&:hover': { - textDecoration: 'none', - }, - '&[aria-current="page"]': { - backgroundColor: alpha(theme.palette_alpha.blue[300], 0.19), - }, - '&[aria-current="page"]:hover': { - backgroundColor: alpha(theme.palette_alpha.neutral[600], 0.08), - color: theme.palette_alpha.text.body, // override Bootstrap.css - }, - }, - container: {}, - disabled: {}, - secondaryAction: {}, -}); - -// @ts-expect-error can't handle overloads by `button` values -const UnstyledSideBarListItem: OverridableComponent< - SideBarListItemTypeMap< - { button?: false }, - SideBarListItemTypeMap['defaultComponent'] - > -> & - ExtendButtonBase< - SideBarListItemTypeMap< - { button: true }, - SideBarListItemTypeMap['defaultComponent'] - > - > = forwardRef(function SideBarListItem(props, ref) { - const { closeSideBarOnXsDown = true, onClick, ...other } = props; - - const sideBar = useSideBar(); - const xsDown = useMediaQuery((theme) => theme.breakpoints.down('xs')); - - if (sideBar === null) { - throw new Error('Missing SideBarProvider'); - } - - const handleClick: ListItemProps['onClick'] = (event) => { - onClick?.(event); - if (closeSideBarOnXsDown && xsDown) { - sideBar.close(); - } - }; - - return ( - - ); -}); - -const SideBarListItem = withStyles(styles, { - name: 'MuiSpark_alpha_SideBarListItem', -})(UnstyledSideBarListItem) as typeof UnstyledSideBarListItem; - -export default SideBarListItem; diff --git a/libs/spark/src/alpha/SideBarListItem/index.ts b/libs/spark/src/alpha/SideBarListItem/index.ts deleted file mode 100644 index 736784d02..000000000 --- a/libs/spark/src/alpha/SideBarListItem/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SideBarListItem'; -export * from './SideBarListItem'; diff --git a/libs/spark/src/alpha/SideBarListSubheader/SideBarListSubheader.spec.tsx b/libs/spark/src/alpha/SideBarListSubheader/SideBarListSubheader.spec.tsx deleted file mode 100644 index 122a622a9..000000000 --- a/libs/spark/src/alpha/SideBarListSubheader/SideBarListSubheader.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import SideBarListSubheader from './SideBarListSubheader'; - -describe('SideBarListSubheader', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/SideBarListSubheader/SideBarListSubheader.ts b/libs/spark/src/alpha/SideBarListSubheader/SideBarListSubheader.ts deleted file mode 100644 index c4293b7e0..000000000 --- a/libs/spark/src/alpha/SideBarListSubheader/SideBarListSubheader.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { - ListSubheaderClassKey, - ListSubheaderProps, -} from '../ListSubheader'; -import ListSubheader from '../ListSubheader'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; -import { buildVariant } from '../theme/typography'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface SideBarListSubheaderProps extends ListSubheaderProps {} - -export type SideBarListSubheaderClassKey = ListSubheaderClassKey; - -const styles: Styles = (theme) => ({ - root: { - ...buildVariant(600, 12, 16, 0.01), - height: 24, - marginBottom: 4, - paddingLeft: 24, - }, -}); - -const UnstyledSideBarListSubheader = ListSubheader; - -const SideBarListSubheader = withStyles(styles, { - name: 'MuiSpark_alpha_SideBarListSubheader', -})(UnstyledSideBarListSubheader) as typeof UnstyledSideBarListSubheader; - -export default SideBarListSubheader; diff --git a/libs/spark/src/alpha/SideBarListSubheader/index.ts b/libs/spark/src/alpha/SideBarListSubheader/index.ts deleted file mode 100644 index 6db132a84..000000000 --- a/libs/spark/src/alpha/SideBarListSubheader/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SideBarListSubheader'; -export * from './SideBarListSubheader'; diff --git a/libs/spark/src/alpha/SideBarProvider/SideBarProvider.spec.tsx b/libs/spark/src/alpha/SideBarProvider/SideBarProvider.spec.tsx deleted file mode 100644 index e61e9a6bc..000000000 --- a/libs/spark/src/alpha/SideBarProvider/SideBarProvider.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import SideBarProvider from './SideBarProvider'; - -describe('SideBarProvider', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/SideBarProvider/SideBarProvider.stories.tsx b/libs/spark/src/alpha/SideBarProvider/SideBarProvider.stories.tsx deleted file mode 100644 index c415da8d1..000000000 --- a/libs/spark/src/alpha/SideBarProvider/SideBarProvider.stories.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { SideBarProviderProps } from '..'; -import { - SideBarDrawer, - SideBarListItem, - SideBarListSubheader, - SideBarList, - SideBarProvider, - useSideBarTrigger, - Divider, -} from '..'; - -export default { - title: '@ps/SideBarProvider', - argTypes: {}, - args: {}, -} as Meta; - -const Template = (args) => { - return ( - - - - - - List item - - - - Subheader - List item - List item - List item - - - - - - Subheader - List item - List item - List item - - - - - - List item - - - - - - ); -}; - -const OpenSideBarTrigger = () => { - const sidebarTrigger = useSideBarTrigger({ action: 'open' }); - - return ; -}; - -const CloseSideBarTrigger = () => { - const sidebarTrigger = useSideBarTrigger({ action: 'close' }); - - return ; -}; - -type Story = DefaultStory; - -export const Composition: Story = Template.bind({}); -Composition.storyName = '(composition)'; diff --git a/libs/spark/src/alpha/SideBarProvider/SideBarProvider.tsx b/libs/spark/src/alpha/SideBarProvider/SideBarProvider.tsx deleted file mode 100644 index 4df3f6f9a..000000000 --- a/libs/spark/src/alpha/SideBarProvider/SideBarProvider.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import clsx from 'clsx'; -import type { HTMLAttributes, ReactNode } from 'react'; -import React, { - forwardRef, - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; -import type { SideBarContextValue } from '../SideBarContext'; -import SideBarContext from '../SideBarContext'; -import useMediaQuery from '../useMediaQuery'; -import type { StandardProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface SideBarProviderProps - extends StandardProps< - HTMLAttributes, - SideBarProviderClassKey, - 'children' - >, - Partial { - /** - * The content of the component. - */ - children?: ReactNode; - /** - * Whether the side bar drawer is open. - */ - isOpen?: boolean; - /** - * Callback fired when the side bar is opened. - */ - onOpen?: () => void; - /** - * Callback fired when the side bar is closed. - */ - onClose?: () => void; -} - -export type SideBarProviderClassKey = 'root'; - -const styles: Styles = (theme) => ({ - root: { - backgroundColor: theme.palette_alpha.background.default, - display: 'flex', - }, -}); - -const UnstyledSideBarProvider = forwardRef< - HTMLDivElement, - SideBarProviderProps ->(function SideBarProvider(props, ref) { - const { - classes: classesProp, - className, - isOpen: isOpenProp, - onOpen, - onClose, - ...other - } = props; - - const classes = classesProp as Exclude; - - // media query returns `false` initially, even when the query is true. see https://github.com/mui/material-ui/issues/21142 - // ~ >= tablet - const isMdUp = useMediaQuery((theme) => theme.breakpoints.up('md'), { - noSsr: true, // prevent inaccurate initial value - }); - // ~ <= mobile - const isXsDown = useMediaQuery( - (theme) => theme.breakpoints.down('xs'), - { noSsr: true } // prevent inaccurate initial value - ); - - // start closed on mobile, unless consumer says otherwise - const [isOpenState, setIsOpenState] = useState( - isOpenProp !== undefined ? isOpenProp : !isXsDown - ); - // if prop is provided, always use it, otherwise use state (i.e. controlled vs uncontrolled) - const isOpen = isOpenProp !== undefined ? isOpenProp : isOpenState; - - const open = useCallback(() => { - setIsOpenState(true); - onOpen?.(); - }, [setIsOpenState, onOpen]); - - const close = useCallback(() => { - setIsOpenState(false); - onClose?.(); - }, [setIsOpenState, onClose]); - - // close when transitioning to mobile - useEffect(() => { - if (!isXsDown) { - return; - } - - close(); - }, [isXsDown, close, open]); - - // open when transitioning to tablet/desktop - useEffect(() => { - if (!isMdUp) { - return; - } - - open(); - }, [isMdUp, open]); - - const value = useMemo(() => ({ close, open, isOpen }), [close, open, isOpen]); - - return ( - -
    - - ); -}); - -const SideBarProvider = withStyles(styles, { - name: 'MuiSpark_alpha_SideBarProvider', -})(UnstyledSideBarProvider) as typeof UnstyledSideBarProvider; - -export default SideBarProvider; diff --git a/libs/spark/src/alpha/SideBarProvider/index.ts b/libs/spark/src/alpha/SideBarProvider/index.ts deleted file mode 100644 index 9e38038e4..000000000 --- a/libs/spark/src/alpha/SideBarProvider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SideBarProvider'; -export * from './SideBarProvider'; diff --git a/libs/spark/src/alpha/Skeleton/Skeleton.ts b/libs/spark/src/alpha/Skeleton/Skeleton.ts deleted file mode 100644 index 7c9bab473..000000000 --- a/libs/spark/src/alpha/Skeleton/Skeleton.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from '@material-ui/lab/Skeleton'; -export * from '@material-ui/lab/Skeleton'; diff --git a/libs/spark/src/alpha/Skeleton/index.ts b/libs/spark/src/alpha/Skeleton/index.ts deleted file mode 100644 index 7803c7770..000000000 --- a/libs/spark/src/alpha/Skeleton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Skeleton'; -export * from './Skeleton'; diff --git a/libs/spark/src/alpha/SvgIcon/SvgIcon.spec.tsx b/libs/spark/src/alpha/SvgIcon/SvgIcon.spec.tsx deleted file mode 100644 index a005b7604..000000000 --- a/libs/spark/src/alpha/SvgIcon/SvgIcon.spec.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { render } from '@testing-library/react'; -import SvgIcon from './SvgIcon'; - -describe('SvgIcon', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/SvgIcon/SvgIcon.stories.tsx b/libs/spark/src/alpha/SvgIcon/SvgIcon.stories.tsx deleted file mode 100644 index e4bad8b6e..000000000 --- a/libs/spark/src/alpha/SvgIcon/SvgIcon.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { SvgIconProps } from '..'; -import { SvgIcon } from '..'; -import { inverseBackground } from '../../../stories'; - -export const _retyped = SvgIcon as typeof SvgIcon; - -export default { - title: '@ps/SvgIcon', - component: _retyped, - excludeStories: ['_retyped'], - args: { - // default values aren't picked up by auto-docs - color: 'inherit', - fontSize: 'inherit', - }, -} as Meta; - -const Template = (args) => ( - - - -); - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const ColorInherit: Story = Template.bind({}); -ColorInherit.args = { color: 'inherit' }; -ColorInherit.storyName = 'color=inherit'; - -export const ColorNormal: Story = Template.bind({}); -ColorNormal.args = { color: 'normal' }; -ColorNormal.storyName = 'color=normal'; - -export const ColorSecondary: Story = Template.bind({}); -ColorSecondary.args = { color: 'secondary' }; -ColorSecondary.storyName = 'color=secondary'; - -export const ColorInverse: Story = Template.bind({}); -ColorInverse.args = { color: 'inverse' }; -ColorInverse.decorators = [inverseBackground]; -ColorInverse.storyName = 'color=inverse'; - -export const ColorInverseSecondary: Story = Template.bind({}); -ColorInverseSecondary.args = { color: 'inverseSecondary' }; -ColorInverseSecondary.decorators = [inverseBackground]; -ColorInverseSecondary.storyName = 'color=inverseSecondary'; - -export const FontSizeInherit: Story = Template.bind({}); -FontSizeInherit.args = { fontSize: 'inherit' }; -FontSizeInherit.storyName = 'fontSize=inherit'; - -export const FontSizeSmall: Story = Template.bind({}); -FontSizeSmall.args = { fontSize: 'small' }; -FontSizeSmall.storyName = 'fontSize=small'; - -export const FontSizeMedium: Story = Template.bind({}); -FontSizeMedium.args = { fontSize: 'medium' }; -FontSizeMedium.storyName = 'fontSize=medium'; - -export const FontSizeLarge: Story = Template.bind({}); -FontSizeLarge.args = { fontSize: 'large' }; -FontSizeLarge.storyName = 'fontSize=large'; - -export const FontSizeXLarge: Story = Template.bind({}); -FontSizeXLarge.args = { fontSize: 'xlarge' }; -FontSizeXLarge.storyName = 'fontSize=xlarge'; diff --git a/libs/spark/src/alpha/SvgIcon/SvgIcon.tsx b/libs/spark/src/alpha/SvgIcon/SvgIcon.tsx deleted file mode 100644 index 373d0c363..000000000 --- a/libs/spark/src/alpha/SvgIcon/SvgIcon.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { SvgIconProps as MuiSvgIconProps } from '@material-ui/core/SvgIcon'; -import { default as MuiSvgIcon } from '@material-ui/core/SvgIcon'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface SvgIconTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'svg' -> { - props: P & - Omit & { - /** - * The color of the component. Defaults to `'inherit'`. - */ - color?: - | 'inherit' - | 'normal' - | 'secondary' - | 'inverse' - | 'inverseSecondary'; - /** - * The font size applied to the icon. Defaults to `'inherit'`. - */ - fontSize?: 'inherit' | 'small' | 'medium' | 'large' | 'xlarge'; - }; - defaultComponent: D; - classKey: SvgIconClassKey; -} - -export type SvgIconProps< - D extends ElementType = SvgIconTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type SvgIconClassKey = 'root'; - -type PrivateClassKey = - | 'private-color-inherit' - | 'private-color-normal' - | 'private-color-secondary' - | 'private-color-inverse' - | 'private-color-inverseSecondary' - | 'private-fontSize-inherit' - | 'private-fontSize-small' - | 'private-fontSize-medium' - | 'private-fontSize-large' - | 'private-fontSize-xlarge'; - -// :NOTE: -// - Duotone layer selector is & > *[opacity=".12"] -// - Duocolor layer selector is & > *[opacity=".4"] - -const styles: Styles = (theme) => ({ - root: {}, - /* Private */ - 'private-color-inherit': { - color: 'inherit', - }, - 'private-color-normal': { - color: theme.palette_alpha.text.icon, - }, - 'private-color-secondary': { - color: theme.palette_alpha.text.secondaryIcon, - }, - 'private-color-inverse': { - color: theme.palette_alpha.text.inverseIcon, - }, - 'private-color-inverseSecondary': { - color: theme.palette_alpha.text.inverseSecondaryIcon, - }, - 'private-fontSize-inherit': { - fontSize: 'inherit', - }, - 'private-fontSize-small': { - fontSize: theme.typography_alpha.pxToRem(16), - }, - 'private-fontSize-medium': { - fontSize: theme.typography_alpha.pxToRem(24), - }, - 'private-fontSize-large': { - fontSize: theme.typography_alpha.pxToRem(32), - }, - 'private-fontSize-xlarge': { - fontSize: theme.typography_alpha.pxToRem(48), - }, -}); - -const SvgIcon: OverridableComponent = forwardRef( - function SvgIcon(props, ref) { - const { - classes, - color = 'inherit', - fontSize = 'inherit', - ...other - } = props; - - return ( - - ); - } -); - -export default withStyles(styles, { name: 'MuiSpark_alpha_SvgIcon' })( - SvgIcon -) as typeof SvgIcon; diff --git a/libs/spark/src/alpha/SvgIcon/index.ts b/libs/spark/src/alpha/SvgIcon/index.ts deleted file mode 100644 index 7f269d711..000000000 --- a/libs/spark/src/alpha/SvgIcon/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SvgIcon'; -export * from './SvgIcon'; diff --git a/libs/spark/src/alpha/Switch/Switch.stories.tsx b/libs/spark/src/alpha/Switch/Switch.stories.tsx deleted file mode 100644 index 2b0a4e830..000000000 --- a/libs/spark/src/alpha/Switch/Switch.stories.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { SwitchProps } from '..'; -import { Switch } from '..'; -import { - containBoxShadowInline, - enableHooks, - sparkThemeProvider, - statefulValue, -} from '../../../stories'; - -export const _retyped = Switch as typeof Switch; - -export default { - title: '@ps/Switch', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [statefulValue, enableHooks, containBoxShadowInline], - args: { - inputProps: { 'aria-label': 'Label' }, - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const STP: Story = Template.bind({}); -STP.decorators = [sparkThemeProvider]; -STP.storyName = '(STP)'; - -export const Hover: Story = Template.bind({}); -Hover.parameters = { pseudo: { hover: true } }; -Hover.storyName = ':hover'; - -export const FocusVisible: Story = Template.bind({}); -FocusVisible.parameters = { pseudo: { focusVisible: true } }; -FocusVisible.storyName = ':focus-visible'; - -export const Disabled: Story = Template.bind({}); -Disabled.args = { disabled: true }; -Disabled.storyName = 'disabled'; - -export const DisabledHover: Story = Template.bind({}); -DisabledHover.args = { disabled: true }; -DisabledHover.parameters = { pseudo: { hover: true } }; -DisabledHover.storyName = 'disabled :hover'; - -export const DisabledError: Story = Template.bind({}); -DisabledError.args = { disabled: true, error: true }; -DisabledError.storyName = 'disabled error'; - -export const DisabledErrorHover: Story = Template.bind({}); -DisabledErrorHover.args = { disabled: true, error: true }; -DisabledErrorHover.parameters = { pseudo: { hover: true } }; -DisabledErrorHover.storyName = 'disabled error :hover'; - -export const Error: Story = Template.bind({}); -Error.args = { error: true }; -Error.storyName = 'error'; - -export const ErrorHover: Story = Template.bind({}); -ErrorHover.args = { error: true }; -ErrorHover.parameters = { pseudo: { hover: true } }; -ErrorHover.storyName = 'error :hover'; - -export const ErrorFocusVisible: Story = Template.bind({}); -ErrorFocusVisible.args = { error: true }; -ErrorFocusVisible.parameters = { pseudo: { focusVisible: true } }; -ErrorFocusVisible.storyName = 'error :focus-visible'; - -export const Checked: Story = Template.bind({}); -Checked.args = { checked: true }; -Checked.storyName = 'checked'; - -export const CheckedHover: Story = Template.bind({}); -CheckedHover.args = { checked: true }; -CheckedHover.parameters = { pseudo: { hover: true } }; -CheckedHover.storyName = 'checked :hover'; - -export const CheckedFocusVisible: Story = Template.bind({}); -CheckedFocusVisible.args = { checked: true }; -CheckedFocusVisible.parameters = { pseudo: { focusVisible: true } }; -CheckedFocusVisible.storyName = 'checked :focus-visible'; - -export const CheckedDisabled: Story = Template.bind({}); -CheckedDisabled.args = { checked: true, disabled: true }; -CheckedDisabled.storyName = 'checked disabled'; - -export const CheckedDisabledHover: Story = Template.bind({}); -CheckedDisabledHover.args = { checked: true, disabled: true }; -CheckedDisabledHover.parameters = { pseudo: { hover: true } }; -CheckedDisabledHover.storyName = 'checked disabled :hover'; - -export const CheckedDisabledError: Story = Template.bind({}); -CheckedDisabledError.args = { checked: true, disabled: true, error: true }; -CheckedDisabledError.storyName = 'checked disabled error'; - -export const CheckedDisabledErrorHover: Story = Template.bind({}); -CheckedDisabledErrorHover.args = { checked: true, disabled: true, error: true }; -CheckedDisabledErrorHover.parameters = { pseudo: { hover: true } }; -CheckedDisabledErrorHover.storyName = 'checked disabled error :hover'; - -export const CheckedError: Story = Template.bind({}); -CheckedError.args = { checked: true, error: true }; -CheckedError.storyName = 'checked error'; - -export const CheckedErrorHover: Story = Template.bind({}); -CheckedErrorHover.args = { checked: true, error: true }; -CheckedErrorHover.parameters = { pseudo: { hover: true } }; -CheckedErrorHover.storyName = 'checked error :hover'; - -export const CheckedErrorFocusVisible: Story = Template.bind({}); -CheckedErrorFocusVisible.args = { checked: true, error: true }; -CheckedErrorFocusVisible.parameters = { pseudo: { focusVisible: true } }; -CheckedErrorFocusVisible.storyName = 'checked error :focus-visible'; - -export const SizeLarge: Story = Template.bind({}); -SizeLarge.args = { size: 'large' }; -SizeLarge.storyName = 'size=large'; diff --git a/libs/spark/src/alpha/Switch/Switch.test.tsx b/libs/spark/src/alpha/Switch/Switch.test.tsx deleted file mode 100644 index 86188ed88..000000000 --- a/libs/spark/src/alpha/Switch/Switch.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import Switch from './Switch'; - -describe('Switch', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Switch/Switch.tsx b/libs/spark/src/alpha/Switch/Switch.tsx deleted file mode 100644 index 8e759e224..000000000 --- a/libs/spark/src/alpha/Switch/Switch.tsx +++ /dev/null @@ -1,185 +0,0 @@ -import type { Ref } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { SwitchProps as MuiSwitchProps } from '@material-ui/core/Switch'; -import { default as MuiSwitch } from '@material-ui/core/Switch'; -import type { StyledComponentProps, Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface SwitchProps - extends Omit< - MuiSwitchProps, - | 'checkedIcon' - | 'classes' - | 'color' - | 'centerRipple' - | 'disableRipple' - | 'disableFocusRipple' - | 'disableTouchRipple' - | 'edge' - | 'focusRipple' - | 'icon' - | 'size' - | 'TouchRippleProps' - >, - StyledComponentProps { - /** - * If `true`, the component should be displayed in an error state. - */ - error?: boolean; - /** - * The size of the switch. - */ - size?: 'medium' | 'large'; -} - -export type SwitchClassKey = - | 'root' - | 'checked' - | 'disabled' - | 'error' - | 'input' - | 'switchBase' - | 'thumb' - | 'track'; - -type PrivateClassKey = - | 'private-root-size-medium' - | 'private-root-size-large' - | 'private-switchBase-size-medium' - | 'private-switchBase-size-large' - | 'private-thumb-size-medium' - | 'private-thumb-size-large' - | 'private-track-size-medium' - | 'private-track-size-large'; - -const styles: Styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - padding: 4, - }, - checked: {}, - disabled: {}, - error: {}, - input: {}, - switchBase: { - '&:hover': { - backgroundColor: 'unset', - }, - }, - thumb: { - backgroundColor: theme.palette_alpha.neutral[0], - boxShadow: theme.shadows_alpha.E100, - '$disabled &': { - backgroundColor: theme.palette_alpha.neutral[90], - boxShadow: theme.shadows_alpha.none, - }, - }, - track: { - backgroundColor: theme.palette_alpha.neutral[80], - // double specificity to override PDS v1 - '$checked + &&': { - backgroundColor: theme.palette_alpha.blue[600], - }, - '$disabled + &&': { - backgroundColor: theme.palette_alpha.neutral[80], - }, - '$switchBase:hover + &&': { - backgroundColor: theme.palette_alpha.neutral[90], - }, - '$disabled:hover + &&': { - backgroundColor: theme.palette_alpha.neutral[80], - }, - '$checked:hover + &&': { - backgroundColor: theme.palette_alpha.blue[400], - }, - '$checked$disabled:hover + &&': { - backgroundColor: theme.palette_alpha.neutral[80], - }, - /* error */ - '.Mui-error + &&': { - boxShadow: theme.shadows_alpha.error, - }, - /* focus-visible */ - '$switchBase:focus-visible + &&, $switchBase.Mui-focusVisible + &&': { - boxShadow: theme.shadows_alpha.focus, - }, - // triple specificity to override PDS v1 - '&&&': { - opacity: 1, - }, - }, - 'private-root-size-medium': { - height: 24 + 8, - width: 48 + 8, - }, - 'private-root-size-large': { - height: 32 + 8, - width: 56 + 8, - }, - 'private-switchBase-size-medium': { - padding: 7, - '&$checked': { - transform: 'translateX(24px)', - }, - }, - 'private-switchBase-size-large': { - padding: 8, - '&$checked': { - transform: 'translateX(24px)', - }, - }, - 'private-thumb-size-medium': { - height: 18, - width: 18, - }, - 'private-thumb-size-large': { - height: 24, - width: 24, - }, - 'private-track-size-medium': { - borderRadius: theme.radii_alpha.full, - height: 24, - width: 48, - }, - 'private-track-size-large': { - borderRadius: theme.radii_alpha.full, - height: 32, - width: 56, - }, -}); - -const Switch = forwardRef(function Switch(props, ref) { - const { classes, error, size = 'medium', ...other } = props; - - return ( - } - {...other} - /> - ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_Switch' })( - Switch -) as typeof Switch; diff --git a/libs/spark/src/alpha/Switch/index.ts b/libs/spark/src/alpha/Switch/index.ts deleted file mode 100644 index e18fb4380..000000000 --- a/libs/spark/src/alpha/Switch/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Switch'; -export * from './Switch'; diff --git a/libs/spark/src/alpha/SwitchField/SwitchField.stories.tsx b/libs/spark/src/alpha/SwitchField/SwitchField.stories.tsx deleted file mode 100644 index 95e7f4960..000000000 --- a/libs/spark/src/alpha/SwitchField/SwitchField.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { SwitchFieldProps } from '..'; -import { SwitchField } from '..'; -import { containBoxShadow } from '../../../stories'; - -export const _retyped = SwitchField as typeof SwitchField; - -export default { - title: '@ps/SwitchField', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [containBoxShadow], -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Label: Story = Template.bind({}); -Label.args = { label: 'Label' }; -Label.storyName = 'label'; - -export const LabelFullWidth: Story = Template.bind({}); -LabelFullWidth.args = { - label: 'Label', - fullWidth: true, -}; -LabelFullWidth.storyName = 'label fullWidth'; - -export const LabelHelperText: Story = Template.bind({}); -LabelHelperText.args = { label: 'Label', helperText: 'Helper text' }; -LabelHelperText.storyName = 'label helperText'; - -export const LabelHelperTextDisabled: Story = Template.bind({}); -LabelHelperTextDisabled.args = { - label: 'Label', - helperText: 'Helper text', - disabled: true, -}; -LabelHelperTextDisabled.storyName = 'label helperText disabled'; - -export const LabelHelperTextError: Story = Template.bind({}); -LabelHelperTextError.args = { - label: 'Label', - helperText: 'Helper text', - error: true, -}; -LabelHelperTextError.storyName = 'label helperText error'; - -export const LabelLabelPlacementStart: Story = Template.bind({}); -LabelLabelPlacementStart.args = { - label: 'Label', - labelPlacement: 'start', -}; -LabelLabelPlacementStart.storyName = 'label labelPlacement=start'; - -export const LabelLabelPlacementStartFullWidth: Story = Template.bind({}); -LabelLabelPlacementStartFullWidth.args = { - label: 'Label', - labelPlacement: 'start', - fullWidth: true, -}; -LabelLabelPlacementStartFullWidth.storyName = - 'label labelPlacement=start fullWidth'; diff --git a/libs/spark/src/alpha/SwitchField/SwitchField.test.tsx b/libs/spark/src/alpha/SwitchField/SwitchField.test.tsx deleted file mode 100644 index 49172da65..000000000 --- a/libs/spark/src/alpha/SwitchField/SwitchField.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { render } from '@testing-library/react'; -import SwitchField from './SwitchField'; - -describe('SwitchField', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/SwitchField/SwitchField.tsx b/libs/spark/src/alpha/SwitchField/SwitchField.tsx deleted file mode 100644 index 37916aaad..000000000 --- a/libs/spark/src/alpha/SwitchField/SwitchField.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import type { ReactNode } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { FormControlLabelProps } from '../FormControlLabel'; -import FormControlLabel from '../FormControlLabel'; -import type { FormHelperTextProps } from '../FormHelperText'; -import FormHelperText from '../FormHelperText'; -import Switch from '../Switch/Switch'; -import { useId } from '../../utils'; -import type { StyledComponentProps, Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface SwitchFieldProps - extends Omit, - StyledComponentProps { - /** - * If `true`, the label will be displayed in an error state. - */ - error?: boolean; - /** - * Props applied to the `FormHelperText` element. - */ - FormHelperTextProps?: Partial; - /** - * If `true`, the field will take up the full width of its container. - */ - fullWidth?: boolean; - /** - * The helper text content. - */ - helperText?: ReactNode; - /** - * The `id` attribute of the `FormControlLabel` element. - */ - id?: string; -} - -type SwitchFieldClassKey = 'root' | 'formControl' | 'helperText'; - -type PrivateClassKey = 'private-root-fullWidth' | 'private-formControl-label'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - display: 'inline-flex', - flexDirection: 'column', - gap: 4, - }, - /* Styles applied to the form control element. */ - formControl: { - justifyContent: 'space-between', - }, - /* Styles applied to the helper text element. */ - helperText: {}, - /* Private */ - 'private-root-fullWidth': { - width: '100%', - }, - 'private-formControl-label': { - fontWeight: 600, - }, -}; - -const SwitchField = forwardRef(function SwitchField( - props, - ref -) { - const { - className, - classes, - disabled, - error, - FormHelperTextProps, - fullWidth, - helperText, - id: idProp, - ...other - } = props; - - const id = useId(idProp); - - const helperTextId = helperText && id ? `${id}-helper-text` : undefined; - - return ( -
    - } - disabled={disabled} - error={error} - ref={ref} - {...other} - classes={{ label: classes['private-formControl-label'] }} - /> - - {helperText ? ( - - {helperText} - - ) : null} -
    - ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_SwitchField' })( - SwitchField -) as typeof SwitchField; diff --git a/libs/spark/src/alpha/SwitchField/index.ts b/libs/spark/src/alpha/SwitchField/index.ts deleted file mode 100644 index 393f8a0bb..000000000 --- a/libs/spark/src/alpha/SwitchField/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SwitchField'; -export * from './SwitchField'; diff --git a/libs/spark/src/alpha/Tab/Tab.stories.tsx b/libs/spark/src/alpha/Tab/Tab.stories.tsx deleted file mode 100644 index 18e4b215f..000000000 --- a/libs/spark/src/alpha/Tab/Tab.stories.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import React from 'react'; -import type { TabProps, TabsProps } from '..'; -import { Tab, Tabs } from '..'; -import { containBoxShadowInline, sparkThemeProvider } from '../../../stories'; - -export const _retyped = Tab as typeof Tab; - -export default { - title: '@ps/Tab', - component: _retyped, - excludeStories: ['_retyped'], - parameters: { actions: { argTypesRegex: '^on.*' } }, - decorators: [containBoxShadowInline], - argTypes: {}, - args: { - children: <>Label, - }, -} as Meta; - -const Template = (args) => { - const { 'Tabs.orientation': TabsOrientation, ...other } = args; - - return ( - - - - ); -}; - -type Story = DefaultStory< - TabProps & { - 'Tabs.orientation': TabsProps['orientation']; - } ->; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const STP: Story = Template.bind({}); -STP.decorators = [sparkThemeProvider]; -STP.storyName = '(STP)'; - -export const Hover: Story = Template.bind({}); -Hover.parameters = { pseudo: { hover: true } }; -Hover.storyName = ':hover'; - -export const FocusVisible: Story = Template.bind({}); -FocusVisible.parameters = { pseudo: { focusVisible: true } }; -FocusVisible.storyName = ':focus-visible'; - -export const Active: Story = Template.bind({}); -Active.parameters = { pseudo: { active: true } }; -Active.storyName = ':active'; - -export const Disabled: Story = Template.bind({}); -Disabled.args = { disabled: true }; -Disabled.storyName = 'disabled'; - -export const DisabledHover: Story = Template.bind({}); -DisabledHover.args = { disabled: true }; -DisabledHover.parameters = { pseudo: { hover: true } }; -DisabledHover.storyName = 'disabled :hover'; - -export const Selected: Story = Template.bind({}); -Selected.args = { selected: true }; -Selected.storyName = 'selected'; - -export const SelectedHover: Story = Template.bind({}); -SelectedHover.args = { selected: true }; -SelectedHover.parameters = { pseudo: { hover: true } }; -SelectedHover.storyName = 'selected :hover'; - -export const SelectedActive: Story = Template.bind({}); -SelectedActive.args = { selected: true }; -SelectedActive.parameters = { pseudo: { active: true } }; -SelectedActive.storyName = 'selected :active'; - -export const SelectedDisabled: Story = Template.bind({}); -SelectedDisabled.args = { selected: true, disabled: true }; -SelectedDisabled.storyName = 'selected disabled'; - -export const TabsOrientationVertical: Story = Template.bind({}); -TabsOrientationVertical.args = { 'Tabs.orientation': 'vertical' }; -TabsOrientationVertical.storyName = 'Tabs.orientation=vertical'; - -export const TabsOrientationVerticalHover: Story = Template.bind({}); -TabsOrientationVerticalHover.args = { 'Tabs.orientation': 'vertical' }; -TabsOrientationVerticalHover.parameters = { pseudo: { hover: true } }; -TabsOrientationVerticalHover.storyName = 'Tabs.orientation=vertical :hover'; - -export const TabsOrientationVerticalFocusVisible: Story = Template.bind({}); -TabsOrientationVerticalFocusVisible.args = { 'Tabs.orientation': 'vertical' }; -TabsOrientationVerticalFocusVisible.parameters = { - pseudo: { focusVisible: true }, -}; -TabsOrientationVerticalFocusVisible.storyName = - 'Tabs.orientation=vertical :focus-visible'; - -export const TabsOrientationVerticalActive: Story = Template.bind({}); -TabsOrientationVerticalActive.args = { 'Tabs.orientation': 'vertical' }; -TabsOrientationVerticalActive.parameters = { pseudo: { active: true } }; -TabsOrientationVerticalActive.storyName = ' Tabs.orientation=vertical :active'; diff --git a/libs/spark/src/alpha/Tab/Tab.test.tsx b/libs/spark/src/alpha/Tab/Tab.test.tsx deleted file mode 100644 index 8f6479bdf..000000000 --- a/libs/spark/src/alpha/Tab/Tab.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import Tab from './Tab'; -import Tabs from '../Tabs'; - -describe('Tab', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Tab/Tab.tsx b/libs/spark/src/alpha/Tab/Tab.tsx deleted file mode 100644 index 4bb45c3e5..000000000 --- a/libs/spark/src/alpha/Tab/Tab.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import type { TabProps as MuiTabProps } from '@material-ui/core/Tab'; -import MuiTab from '@material-ui/core/Tab'; -import clsx from 'clsx'; -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import type { ButtonBaseTypeMap } from '../../ButtonBase'; -import useTabs from '../useTabs'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface TabTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = ButtonBaseTypeMap['defaultComponent'] -> { - props: P & - Omit< - MuiTabProps, - | 'icon' - | 'label' - | 'textColor' - // button base - | 'centerRipple' - | 'disableFocusRipple' - | 'disableRipple' - | 'disableTouchRipple' - | 'focusRipple' - | 'TouchRippleProps' - >; - defaultComponent: D; - classKey: TabClassKey; -} - -export type TabProps< - D extends ElementType = TabTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type TabClassKey = 'root' | 'label'; - -type PrivateClassKey = - | 'private-root-disabled' - | 'private-root-orientation-horizontal' - | 'private-root-orientation-vertical' - | 'private-label-disabled' - | 'private-label-orientation-horizontal' - | 'private-label-orientation-vertical'; - -const styles: Styles = (theme) => ({ - root: { - minHeight: 'unset', - maxWidth: 'unset', - minWidth: 'unset', - // override v1 - border: theme.borders_alpha.none, - borderRadius: theme.radii_alpha.zero, - // override MUI defaults - '&&': { - opacity: 1, - }, - textDecoration: 'unset', // override Bootstrap.css - color: 'unset', // override Bootstrap.css - '&:focus': { - outline: 'unset', // override Bootstrap.css - color: 'unset', // override Bootstrap.css - textDecoration: 'unset', // override Bootstrap.css - }, - '&:hover': { - // override Bootstrap.css - color: 'unset', // override Bootstrap.css - textDecoration: 'unset', // override Bootstrap.css - }, - }, - label: { - ...theme.typography_alpha.label, - color: theme.palette_alpha.text.body, - textTransform: 'none', - }, - 'private-root-disabled': { - '&:hover': { - boxShadow: theme.shadows_alpha.none, - }, - }, - 'private-root-orientation-horizontal': { - padding: '16px 0', - '&:hover': { - boxShadow: `inset 0px -2px ${theme.palette_alpha.neutral[100]}`, - }, - '&:active': { - zIndex: 2, - boxShadow: `inset 0px -2px ${theme.palette_alpha.blue[400]}`, - }, - '&.Mui-focusVisible, &:focus-visible': { - zIndex: 2, - borderRadius: theme.radii_alpha.md, - boxShadow: theme.shadows_alpha.focus, - }, - }, - 'private-root-orientation-vertical': { - padding: '12px 12px', - '&:hover': { - boxShadow: `inset -2px 0 ${theme.palette_alpha.neutral[100]}`, - }, - '&:active': { - zIndex: 2, - boxShadow: `inset -2px 0px ${theme.palette_alpha.blue[400]}`, - }, - '&.Mui-focusVisible, &:focus-visible': { - zIndex: 2, - borderRadius: theme.radii_alpha.md, - boxShadow: theme.shadows_alpha.focus, - }, - }, - 'private-label-disabled': { - color: theme.palette_alpha.text.disabled, - }, - 'private-label-orientation-horizontal': {}, - 'private-label-orientation-vertical': { - alignItems: 'flex-start', - }, -}); - -const Tab: OverridableComponent = forwardRef(function Tab( - props, - ref -) { - const { children, classes, disabled, selected, ...other } = props; - - const tabs = useTabs(); - if (tabs === null) { - throw new Error('No Tabs provided'); - } - - return ( - - ); -}); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_Tab', -})(Tab) as typeof Tab; diff --git a/libs/spark/src/alpha/Tab/index.ts b/libs/spark/src/alpha/Tab/index.ts deleted file mode 100644 index 9d664d03f..000000000 --- a/libs/spark/src/alpha/Tab/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Tab'; -export * from './Tab'; diff --git a/libs/spark/src/alpha/TabPanel/TabPanel.stories.tsx b/libs/spark/src/alpha/TabPanel/TabPanel.stories.tsx deleted file mode 100644 index 04fb50dcd..000000000 --- a/libs/spark/src/alpha/TabPanel/TabPanel.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import React from 'react'; -import type { TabPanelProps } from '..'; -import { TabPanel, Tabs } from '..'; -import { sparkThemeProvider } from '../../../stories'; - -export const _retyped = TabPanel as typeof TabPanel; - -export default { - title: '@ps/TabPanel', - component: _retyped, - excludeStories: ['_retyped'], - args: { - 'Tabs.defaultValue': '0', - }, -} as Meta; - -const Template = (args) => { - const { 'Tabs.defaultValue': TabsDefaultValue, ...other } = args; - - return ( - - Panel - - ); -}; - -type Story = DefaultStory; - -export const Value: Story = Template.bind({}); -Value.args = { value: '0' }; -Value.storyName = 'value'; - -export const ValueSTP: Story = Template.bind({}); -ValueSTP.args = { value: '0' }; -ValueSTP.decorators = [sparkThemeProvider]; -ValueSTP.storyName = 'value (STP)'; diff --git a/libs/spark/src/alpha/TabPanel/TabPanel.test.tsx b/libs/spark/src/alpha/TabPanel/TabPanel.test.tsx deleted file mode 100644 index 67f201b03..000000000 --- a/libs/spark/src/alpha/TabPanel/TabPanel.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import TabPanel from './TabPanel'; -import Tabs from '../Tabs'; - -describe('TabPanel', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/TabPanel/TabPanel.tsx b/libs/spark/src/alpha/TabPanel/TabPanel.tsx deleted file mode 100644 index 0a2adb1fb..000000000 --- a/libs/spark/src/alpha/TabPanel/TabPanel.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import type { TabPanelProps as MuiTabPanelProps } from '@material-ui/lab/TabPanel'; -import MuiTabPanel from '@material-ui/lab/TabPanel'; -import React, { forwardRef } from 'react'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface TabPanelProps extends MuiTabPanelProps {} - -export type TabPanelClassKey = 'root'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - padding: 0, - }, -}; - -const TabPanel = forwardRef(function TabPanel( - props, - ref -) { - const { classes, ...other } = props; - - return ; -}); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_TabPanel', -})(TabPanel) as typeof TabPanel; diff --git a/libs/spark/src/alpha/TabPanel/index.ts b/libs/spark/src/alpha/TabPanel/index.ts deleted file mode 100644 index 1b0fbce54..000000000 --- a/libs/spark/src/alpha/TabPanel/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './TabPanel'; -export * from './TabPanel'; diff --git a/libs/spark/src/alpha/Tabs/Tabs.stories.tsx b/libs/spark/src/alpha/Tabs/Tabs.stories.tsx deleted file mode 100644 index dbde2ed52..000000000 --- a/libs/spark/src/alpha/Tabs/Tabs.stories.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import React from 'react'; -import type { TabsProps } from '..'; -import { Tab, TabPanel, Tabs, TabsList } from '..'; -import { - containBoxShadow, - enableHooks, - sparkThemeProvider, - statefulValue, -} from '../../../stories'; - -export const _retyped = Tabs as typeof Tabs; - -export default { - title: '@ps/Tabs', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [containBoxShadow], - args: { - 'TabsList.aria-label': 'tabs story', - }, -} as Meta; - -const Template = (args) => { - const { 'TabsList.aria-label': TabsListAriaLabel, ...other } = args; - - return ( - - - Label 0 - Label 1 - Label 2 - - Panel 0 - Panel 1 - Panel 2 - - ); -}; - -type Story = DefaultStory; - -export const DefaultValue: Story = Template.bind({}); -DefaultValue.args = { defaultValue: '0' }; -DefaultValue.storyName = 'defaultValue'; - -export const DefaultValueSTP: Story = Template.bind({}); -DefaultValueSTP.args = { defaultValue: '0' }; -DefaultValueSTP.decorators = [sparkThemeProvider]; -DefaultValueSTP.storyName = 'defaultValue (STP)'; - -export const DefaultValueOrientationVertical: Story = Template.bind({}); -DefaultValueOrientationVertical.args = { - defaultValue: '0', - orientation: 'vertical', -}; -DefaultValueOrientationVertical.storyName = 'defaultValue orientation=vertical'; - -export const Value: Story = Template.bind({}); -Value.args = { value: '0' }; -Value.decorators = [statefulValue, enableHooks]; -Value.storyName = 'value'; diff --git a/libs/spark/src/alpha/Tabs/Tabs.test.tsx b/libs/spark/src/alpha/Tabs/Tabs.test.tsx deleted file mode 100644 index c57e25908..000000000 --- a/libs/spark/src/alpha/Tabs/Tabs.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import Tabs from './Tabs'; - -describe('Tabs', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Tabs/Tabs.tsx b/libs/spark/src/alpha/Tabs/Tabs.tsx deleted file mode 100644 index d4dfd3867..000000000 --- a/libs/spark/src/alpha/Tabs/Tabs.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import MuiTabContext from '@material-ui/lab/TabContext'; -import clsx from 'clsx'; -import type { ElementType, SyntheticEvent } from 'react'; -import React, { forwardRef, useCallback, useMemo } from 'react'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import { useControlled } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; -import type { TabsContextValue } from '../TabsContext'; -import TabsContext from '../TabsContext'; - -export interface TabsTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'div' -> { - props: P & { - /** - * The value of the currently selected `Tab`. - * If you don't want any selected `Tab`, you can set this prop to `false`. - */ - value?: TabsContextValue['value']; - /** - * The default value. Use when the component is not controlled. - */ - defaultValue?: TabsContextValue['value']; - /** - * The component orientation (layout flow direction). - */ - orientation?: 'horizontal' | 'vertical'; - /** - * Callback invoked when new value is being set. - */ - onChange?: ( - event: SyntheticEvent, - value: TabsContextValue['value'] - ) => void; - }; - defaultComponent: D; - classKey: TabsClassKey; -} - -export type TabsProps< - D extends ElementType = TabsTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D> & { - component?: D; -}; - -export type TabsClassKey = 'root'; - -type PrivateClassKey = - | 'private-root-orientation-horizontal' - | 'private-root-orientation-vertical'; - -const styles: Styles = { - /* Styles applied to the root element. */ - root: { - display: 'flex', - }, - /* Private */ - 'private-root-orientation-horizontal': { - flexDirection: 'column', - }, - 'private-root-orientation-vertical': { - flexDirection: 'row', - }, -}; - -const Tabs: OverridableComponent = forwardRef(function Tabs( - props, - ref -) { - const { - children, - classes, - className, - defaultValue, - onChange, - orientation = 'horizontal', - value: valueProp, - ...other - } = props; - - const [value, setValue] = useControlled({ - // coerce to string since v4 only accepts string - controlled: valueProp === false ? '_false' : valueProp, - default: defaultValue === false ? '_false' : defaultValue, - name: 'Tabs', - state: 'value', - }); - - const onSelected = useCallback( - (event: SyntheticEvent, newValue: string) => { - setValue(newValue); - if (onChange) { - onChange(event, newValue); - } - }, - [onChange, setValue] - ); - - const contextValue = useMemo( - () => - ({ - onSelected, - orientation, - value, - // missing `idPrefix` but not actually necessary - } as TabsContextValue), - [onSelected, orientation, value] - ); - - return ( -
    - - {children} - -
    - ); -}); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_Tabs', -})(Tabs) as typeof Tabs; diff --git a/libs/spark/src/alpha/Tabs/index.ts b/libs/spark/src/alpha/Tabs/index.ts deleted file mode 100644 index cd2e770d2..000000000 --- a/libs/spark/src/alpha/Tabs/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Tabs'; -export * from './Tabs'; diff --git a/libs/spark/src/alpha/TabsContext/TabsContext.ts b/libs/spark/src/alpha/TabsContext/TabsContext.ts deleted file mode 100644 index b9de3e7e5..000000000 --- a/libs/spark/src/alpha/TabsContext/TabsContext.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { TabContextValue as MuiTabContextValue } from '@material-ui/lab/TabContext'; -import type { SyntheticEvent } from 'react'; -import { createContext } from 'react'; - -type Value = string | false; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface TabsContextValue extends Omit { - /** - * Callback for setting new value. - */ - onSelected: (event: SyntheticEvent, value: Value) => void; - /** - * The component orientation (layout flow direction). - */ - orientation?: 'horizontal' | 'vertical'; - /** - * The currently selected tab's value. - */ - value: Value; -} - -const TabsContext = createContext(null); - -if (process.env.NODE_ENV !== 'production') { - TabsContext.displayName = 'TabsContext'; -} - -export default TabsContext; diff --git a/libs/spark/src/alpha/TabsContext/index.ts b/libs/spark/src/alpha/TabsContext/index.ts deleted file mode 100644 index 355216d49..000000000 --- a/libs/spark/src/alpha/TabsContext/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './TabsContext'; -export * from './TabsContext'; diff --git a/libs/spark/src/alpha/TabsList/TabsList.stories.tsx b/libs/spark/src/alpha/TabsList/TabsList.stories.tsx deleted file mode 100644 index 8e9611707..000000000 --- a/libs/spark/src/alpha/TabsList/TabsList.stories.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import React from 'react'; -import type { TabsListProps, TabsProps } from '..'; -import { Tab, Tabs, TabsList } from '..'; -import { containBoxShadow, sparkThemeProvider } from '../../../stories'; - -export const _retyped = TabsList as typeof TabsList; - -export default { - title: '@ps/TabsList', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [containBoxShadow], - args: { - 'Tabs.defaultValue': '0', - 'aria-label': 'Example of three tabs', - }, -} as Meta; - -const Template = (args) => { - const { - 'Tabs.orientation': TabsOrientation, - 'Tabs.defaultValue': TabsDefaultValue, - ...other - } = args; - - return ( - - - Label 0 - Label 1 - Label 2 - - - ); -}; - -type Story = DefaultStory< - TabsListProps & { - 'Tabs.orientation': TabsProps['orientation']; - } ->; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const STP: Story = Template.bind({}); -STP.decorators = [sparkThemeProvider]; -STP.storyName = '(STP)'; - -export const Hover: Story = Template.bind({}); -Hover.parameters = { pseudo: { hover: true } }; -Hover.storyName = ':hover'; - -export const FocusVisible: Story = Template.bind({}); -FocusVisible.parameters = { pseudo: { focusVisible: true } }; -FocusVisible.storyName = ':focus-visible'; - -export const Active: Story = Template.bind({}); -Active.parameters = { pseudo: { active: true } }; -Active.storyName = ':active'; - -export const TabsOrientationVertical: Story = Template.bind({}); -TabsOrientationVertical.args = { 'Tabs.orientation': 'vertical' }; -TabsOrientationVertical.storyName = 'Tabs.orientation=vertical'; - -export const TabsOrientationVerticalHover: Story = Template.bind({}); -TabsOrientationVerticalHover.args = { 'Tabs.orientation': 'vertical' }; -TabsOrientationVerticalHover.parameters = { pseudo: { hover: true } }; -TabsOrientationVerticalHover.storyName = 'Tabs.orientation=vertical :hover'; - -export const TabsOrientationVerticalFocusVisible: Story = Template.bind({}); -TabsOrientationVerticalFocusVisible.args = { 'Tabs.orientation': 'vertical' }; -TabsOrientationVerticalFocusVisible.parameters = { - pseudo: { focusVisible: true }, -}; -TabsOrientationVerticalFocusVisible.storyName = - 'Tabs.orientation=vertical :focus-visible'; - -export const TabsOrientationVerticalActive: Story = Template.bind({}); -TabsOrientationVerticalActive.args = { 'Tabs.orientation': 'vertical' }; -TabsOrientationVerticalActive.parameters = { pseudo: { active: true } }; -TabsOrientationVerticalActive.storyName = 'Tabs.orientation=vertical :active'; diff --git a/libs/spark/src/alpha/TabsList/TabsList.test.tsx b/libs/spark/src/alpha/TabsList/TabsList.test.tsx deleted file mode 100644 index 7da5ce4f2..000000000 --- a/libs/spark/src/alpha/TabsList/TabsList.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react'; -import Tabs from '../Tabs'; -import TabsList from './TabsList'; - -describe('TabsList', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/TabsList/TabsList.tsx b/libs/spark/src/alpha/TabsList/TabsList.tsx deleted file mode 100644 index 7af7f0495..000000000 --- a/libs/spark/src/alpha/TabsList/TabsList.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import type { - TabListTypeMap as MuiTabListTypeMap, - TabListProps as MuiTabListProps, -} from '@material-ui/lab/TabList'; -import MuiTabList from '@material-ui/lab/TabList'; -import clsx from 'clsx'; -import React, { forwardRef } from 'react'; -import useTabs from '../useTabs'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface TabsListTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends React.ElementType = MuiTabListTypeMap['defaultComponent'] -> { - props: P & - Omit< - MuiTabListProps, - | 'centered' - | 'indicatorColor' - | 'onChange' - | 'orientation' - | 'selectionFollowsFocus' - | 'ScrollButtonComponent' - | 'scrollButtons' - | 'TabScrollButtonProps' - | 'textColor' - | 'variant' - >; - defaultComponent: D; - classKey: TabsListClassKey; -} - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export type TabsListProps< - D extends React.ElementType = TabsListTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type TabsListClassKey = - | 'root' - | 'tablist' - | 'flexContainer' - | 'indicator'; - -type PrivateClassKey = - | 'private-flexContainer-orientation-horizontal' - | 'private-flexContainer-orientation-vertical' - | 'private-indicator-orientation-horizontal' - | 'private-indicator-orientation-vertical'; - -// all the padding/margin work is to get Tab focus shadows to not be cutoff -const styles: Styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - margin: -4, - padding: 4, - // override v1 - boxShadow: theme.shadows_alpha.none, - // override MUI - minHeight: 'unset', - }, - /* Styles applied to the tablist element (child of root element). */ - tablist: { - margin: -4, - overflowX: 'scroll', - padding: 4, - // from MUI (Tabs.styles.scrollable) - // Hide dimensionless scrollbar on MacOS - scrollbarWidth: 'none', // Firefox - '&::-webkit-scrollbar': { - display: 'none', // Safari + Chrome - }, - // override MUI - width: 'unset', - }, - /* Styles applied to the flex container element (child of scroller element). */ - flexContainer: {}, - /* Styles applied to the indicator element (child of scroller element). */ - indicator: { - backgroundColor: theme.palette_alpha.blue[600], - }, - /* Private */ - 'private-flexContainer-orientation-horizontal': { - boxShadow: `inset 0px -2px ${theme.palette_alpha.neutral[80]}`, - gap: 32, - }, - 'private-flexContainer-orientation-vertical': { - boxShadow: `inset -2px 0 ${theme.palette_alpha.neutral[80]}`, - gap: 12, - }, - 'private-indicator-orientation-horizontal': { - bottom: 4, - }, - 'private-indicator-orientation-vertical': { - right: 4, - }, -}); - -const TabsList: OverridableComponent = forwardRef( - function TabsList(props, ref) { - const { classes, ...other } = props; - - const tabs = useTabs(); - if (tabs === null) { - throw new Error('No Tabs provided'); - } - - const onChange = (event, value) => { - tabs.onSelected(event, value); - }; - - return ( - - ); - } -); - -export default withStyles(styles, { - name: 'MuiSpark_alpha_TabsList', -})(TabsList) as typeof TabsList; diff --git a/libs/spark/src/alpha/TabsList/index.ts b/libs/spark/src/alpha/TabsList/index.ts deleted file mode 100644 index 3b1c48178..000000000 --- a/libs/spark/src/alpha/TabsList/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './TabsList'; -export * from './TabsList'; diff --git a/libs/spark/src/alpha/Tag/Tag.stories.tsx b/libs/spark/src/alpha/Tag/Tag.stories.tsx deleted file mode 100644 index 3f18bbc3f..000000000 --- a/libs/spark/src/alpha/Tag/Tag.stories.tsx +++ /dev/null @@ -1,250 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { TagProps } from '..'; -import { Tag } from '..'; -import { - containBoxShadowInline, - Filter, - sparkThemeProvider, -} from '../../../stories'; - -export const _retyped = Tag as typeof Tag; - -const emptyFn = () => { - return; -}; - -export default { - title: '@ps/Tag', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [containBoxShadowInline], - parameters: { - actions: { - // override default actions regex - // deleteIcon rendering is based on onDelete being supplied, so substitute - // custom argType control below. - argTypesRegex: '^on(?!Delete).*', - }, - }, - argTypes: { - icon: { - control: 'select', - options: ['undefined', ''], - mapping: { - undefined: undefined, - '': , - }, - }, - onClick: { - control: 'select', - options: ['undefined', '(handleClick)'], - mapping: { - undefined: undefined, - '(handleClick)': emptyFn, - }, - }, - onDelete: { - control: 'select', - options: ['undefined', '(handleDelete)'], - mapping: { - undefined: undefined, - '(handleDelete)': emptyFn, - }, - }, - }, - args: { - onClick: 'undefined', - onDelete: 'undefined', - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory< - TagProps & { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - icon: any; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onClick: any; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onDelete: any; - } ->; - -export const Label: Story = Template.bind({}); -Label.args = { label: 'Label' }; -Label.storyName = 'label'; - -export const LabelSTP: Story = Template.bind({}); -LabelSTP.args = { label: 'Label' }; -LabelSTP.decorators = [sparkThemeProvider]; -LabelSTP.storyName = 'label (STP)'; - -export const LabelDisabled: Story = Template.bind({}); -LabelDisabled.args = { label: 'Label', disabled: true }; -LabelDisabled.storyName = 'label disabled'; - -export const LabelIcon: Story = Template.bind({}); -LabelIcon.args = { label: 'Label', icon: '' }; -LabelIcon.storyName = 'label icon'; - -export const LabelOnDelete: Story = Template.bind({}); -LabelOnDelete.args = { label: 'Label', onDelete: '(handleDelete)' }; -LabelOnDelete.storyName = 'label onDelete'; - -export const LabelOnDeleteActive: Story = Template.bind({}); -LabelOnDeleteActive.args = { label: 'Label', onDelete: '(handleDelete)' }; -LabelOnDeleteActive.parameters = { pseudo: { active: true } }; -LabelOnDeleteActive.storyName = 'label onDelete :active'; - -export const LabelOnDeleteFocus: Story = Template.bind({}); -LabelOnDeleteFocus.args = { label: 'Label', onDelete: '(handleDelete)' }; -LabelOnDeleteFocus.parameters = { pseudo: { focus: true } }; -LabelOnDeleteFocus.storyName = 'label onDelete :focus'; - -export const LabelOnDeleteFocusVisible: Story = Template.bind({}); -LabelOnDeleteFocusVisible.args = { label: 'Label', onDelete: '(handleDelete)' }; -LabelOnDeleteFocusVisible.parameters = { pseudo: { focusVisible: true } }; -LabelOnDeleteFocusVisible.storyName = 'label onDelete :focus-visible'; - -export const LabelOnDeleteHover: Story = Template.bind({}); -LabelOnDeleteHover.args = { label: 'Label', onDelete: '(handleDelete)' }; -LabelOnDeleteHover.parameters = { pseudo: { hover: true } }; -LabelOnDeleteHover.storyName = 'label onDelete :hover'; - -const colors: Array = [ - 'neutral', - 'red', - 'yellow', - 'teal', - 'green', - 'blue', - 'purple', -]; - -const ColorBySizeByVariantTemplate = ({ color, size, variant, ...other }) => ( -
    -
    - {colors.map((color) => ( - - ))} -
    -
    - {colors.map((color) => ( - - ))} -
    -
    - {colors.map((color) => ( - - ))} -
    -
    - {colors.map((color) => ( - - ))} -
    -
    -); - -export const Label_CxSxV: Story = ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV.args = { label: 'Label' }; -Label_CxSxV.storyName = 'label color ⨯ size ⨯ variant'; - -export const Label_CxSxV_onDelete: Story = ColorBySizeByVariantTemplate.bind( - {} -); -Label_CxSxV_onDelete.args = { label: 'Label', onDelete: '(handleDelete)' }; -Label_CxSxV_onDelete.storyName = 'label color ⨯ size ⨯ variant onDelete'; - -export const Label_CxSxV_onDeleteActive: Story = - ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onDeleteActive.args = { - label: 'Label', - onDelete: '(handleDelete)', -}; -Label_CxSxV_onDeleteActive.parameters = { pseudo: { active: true } }; -Label_CxSxV_onDeleteActive.storyName = - 'label color ⨯ size ⨯ variant onDelete :active'; - -export const Label_CxSxV_onDeleteHover: Story = - ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onDeleteHover.args = { label: 'Label', onDelete: '(handleDelete)' }; -Label_CxSxV_onDeleteHover.parameters = { pseudo: { hover: true } }; -Label_CxSxV_onDeleteHover.storyName = - 'label color ⨯ size ⨯ variant onDelete :hover'; - -export const Label_CxSxV_onDeleteFocus: Story = - ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onDeleteFocus.args = { label: 'Label', onDelete: '(handleDelete)' }; -Label_CxSxV_onDeleteFocus.parameters = { pseudo: { focus: true } }; -Label_CxSxV_onDeleteFocus.storyName = - 'label color ⨯ size ⨯ variant onDelete :focus'; - -export const Label_CxSxV_onDeleteFocusVisible: Story = - ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onDeleteFocusVisible.args = { - label: 'Label', - onDelete: '(handleDelete)', -}; -Label_CxSxV_onDeleteFocusVisible.parameters = { - pseudo: { focusVisible: true }, -}; -Label_CxSxV_onDeleteFocusVisible.storyName = - 'label color ⨯ size ⨯ variant onDelete :focus-visible'; - -export const Label_CxSxV_onClick: Story = ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onClick.args = { label: 'Label', onClick: '(handleClick)' }; -Label_CxSxV_onClick.storyName = 'label color ⨯ size ⨯ variant onClick'; - -export const Label_CxSxV_onClickActive: Story = - ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onClickActive.args = { label: 'Label', onClick: '(handleClick)' }; -Label_CxSxV_onClickActive.parameters = { pseudo: { active: true } }; -Label_CxSxV_onClickActive.storyName = - 'label color ⨯ size ⨯ variant onClick :active'; - -export const Label_CxSxV_onClickHover: Story = - ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onClickHover.args = { label: 'Label', onClick: '(handleClick)' }; -Label_CxSxV_onClickHover.parameters = { pseudo: { hover: true } }; -Label_CxSxV_onClickHover.storyName = - 'label color ⨯ size ⨯ variant onClick :hover'; - -export const Label_CxSxV_onClickFocus: Story = - ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onClickFocus.args = { label: 'Label', onClick: '(handleClick)' }; -Label_CxSxV_onClickFocus.parameters = { pseudo: { focus: true } }; -Label_CxSxV_onClickFocus.storyName = - 'label color ⨯ size ⨯ variant onClick :focus'; - -export const Label_CxSxV_onClickFocusVisible: Story = - ColorBySizeByVariantTemplate.bind({}); -Label_CxSxV_onClickFocusVisible.args = { - label: 'Label', - onClick: '(handleClick)', -}; -Label_CxSxV_onClickFocusVisible.parameters = { - pseudo: { focusVisible: true }, -}; -Label_CxSxV_onClickFocusVisible.storyName = - 'label color ⨯ size ⨯ variant onClick :focus-visible'; diff --git a/libs/spark/src/alpha/Tag/Tag.test.tsx b/libs/spark/src/alpha/Tag/Tag.test.tsx deleted file mode 100644 index 4d081a8d0..000000000 --- a/libs/spark/src/alpha/Tag/Tag.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import Tag from './Tag'; - -describe('Tag', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Tag/Tag.tsx b/libs/spark/src/alpha/Tag/Tag.tsx deleted file mode 100644 index 801c83477..000000000 --- a/libs/spark/src/alpha/Tag/Tag.tsx +++ /dev/null @@ -1,511 +0,0 @@ -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { ChipProps as MuiChipProps } from '@material-ui/core/Chip'; -import { default as MuiChip } from '@material-ui/core/Chip'; -import { CrossSmall } from '../../internal'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import { buildVariant } from '../theme/typography'; -import { alpha, darken } from '@material-ui/core/styles'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface TagTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'div' -> { - props: P & - Omit< - MuiChipProps, - 'classes' | 'clickable' | 'color' | 'size' | 'variant' - > & { - /** - * The color of the tag. - */ - color?: - | 'neutral' - | 'red' - | 'yellow' - | 'teal' - | 'green' - | 'blue' - | 'purple'; - /** - * The size of the tag. - */ - size?: 'medium' | 'small'; - /** - * The variant of the tag. - */ - variant?: 'subtle' | 'bold'; - }; - defaultComponent: D; - classKey: TagClassKey; -} - -export type TagProps< - D extends ElementType = TagTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type TagClassKey = 'root' | 'label' | 'deleteIcon' | 'icon' | 'avatar'; - -type PrivateClassKey = - | 'private-root-clickable' - | 'private-root-deletable' - | 'private-root-size-small' - | 'private-root-size-medium' - | 'private-root-variant-bold-color-neutral' - | 'private-root-variant-bold-color-red' - | 'private-root-variant-bold-color-yellow' - | 'private-root-variant-bold-color-teal' - | 'private-root-variant-bold-color-green' - | 'private-root-variant-bold-color-blue' - | 'private-root-variant-bold-color-purple' - | 'private-root-variant-subtle-color-neutral' - | 'private-root-variant-subtle-color-neutral-size-small' - | 'private-root-variant-subtle-color-neutral-size-medium' - | 'private-root-variant-subtle-color-red' - | 'private-root-variant-subtle-color-yellow' - | 'private-root-variant-subtle-color-teal' - | 'private-root-variant-subtle-color-green' - | 'private-root-variant-subtle-color-blue' - | 'private-root-variant-subtle-color-purple' - | 'private-label-size-small' - | 'private-label-size-medium' - | 'private-icon-size-small' - | 'private-icon-size-medium' - | 'private-deleteIcon-size-small' - | 'private-deleteIcon-size-medium' - | 'private-deleteIcon-variant-bold' - | 'private-deleteIcon-variant-subtle'; - -// extracted since there's not an equivalent typography variant -const tagFontVariantMedium = buildVariant( - 500, - 16, - 20, - undefined, - 'none', - '"Inter", sans-serif', - "'cv05' 1, 'ss03' 1" -); -const tagFontVariantSmall = buildVariant( - 500, - 12, - 20, - undefined, - 'none', - '"Inter", sans-serif', - "'cv05' 1, 'ss03' 1" -); - -const styles: Styles = (theme) => ({ - root: { - borderRadius: theme.radii_alpha.sm, - height: 'unset', // unset MUI - // Determined in fn body - color: theme.palette_alpha.text.heading, - '&.Mui-focusVisible, &:focus-visible': { - boxShadow: theme.shadows_alpha.focus, - }, - }, - label: { - color: 'inherit', - padding: 0, // unset MUI - // artificially shift label down by 1px to appear more centered; especially apparent when beside an icon - marginTop: 1, - marginBottom: -1, - }, - icon: { - color: 'inherit', - height: '1em', - margin: '0 4px 0 0', - width: '1em', - }, - deleteIcon: { - borderRadius: theme.radii_alpha.xs, - color: 'inherit', - height: '1em', - margin: '0 0 0 4px', - width: '1em', - '&:hover': { - color: 'inherit', // override MUI - }, - }, - avatar: { - // blocked until `Avatar` initial implementation - }, - /* Private */ - 'private-root-clickable': { - '&:active': { - boxShadow: theme.shadows_alpha.none, // override MUI - }, - }, - 'private-root-deletable': {}, - 'private-root-size-small': { - padding: '2px 12px', - }, - 'private-root-size-medium': { - padding: '6px 16px', - }, - 'private-root-variant-bold-color-neutral': { - backgroundColor: theme.palette_alpha.neutral[70], - '&:focus': { - backgroundColor: theme.palette_alpha.neutral[70], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.neutral[70], 0.2), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.neutral[70], 0.4), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.neutral[70], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.neutral[70], // override MUI - }, - }, - 'private-root-variant-bold-color-red': { - backgroundColor: theme.palette_alpha.red[700], - color: theme.palette_alpha.text.inverseHeading, - '&:focus': { - backgroundColor: theme.palette_alpha.red[700], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.red[700], 0.2), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.red[700], 0.4), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.red[700], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.red[700], // override MUI - }, - }, - 'private-root-variant-bold-color-yellow': { - backgroundColor: theme.palette_alpha.yellow[500], - '&:focus': { - backgroundColor: theme.palette_alpha.yellow[500], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.yellow[500], 0.2), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.yellow[500], 0.4), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.yellow[500], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.yellow[500], // override MUI - }, - }, - 'private-root-variant-bold-color-teal': { - backgroundColor: theme.palette_alpha.teal[600], - color: theme.palette_alpha.text.inverseHeading, - '&:focus': { - backgroundColor: theme.palette_alpha.teal[600], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.teal[600], 0.2), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.teal[600], 0.4), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.teal[600], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.teal[600], // override MUI - }, - }, - 'private-root-variant-bold-color-green': { - backgroundColor: theme.palette_alpha.green[600], - color: theme.palette_alpha.text.inverseHeading, - '&:focus': { - backgroundColor: theme.palette_alpha.green[600], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.green[600], 0.2), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.green[600], 0.4), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.green[600], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.green[600], // override MUI - }, - }, - 'private-root-variant-bold-color-blue': { - backgroundColor: theme.palette_alpha.blue[600], - color: theme.palette_alpha.text.inverseHeading, - '&:focus': { - backgroundColor: theme.palette_alpha.blue[600], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.blue[600], 0.2), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.blue[600], 0.4), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.blue[600], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.blue[600], // override MUI - }, - }, - 'private-root-variant-bold-color-purple': { - backgroundColor: theme.palette_alpha.purple[600], - color: theme.palette_alpha.text.inverseHeading, - '&:focus': { - backgroundColor: theme.palette_alpha.purple[600], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.purple[600], 0.2), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.purple[600], 0.4), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.purple[600], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.purple[600], // override MUI - }, - }, - 'private-root-variant-subtle-color-neutral': { - backgroundColor: theme.palette_alpha.neutral[0], - // Special case: add border and decrease padding to account for the added height/width - border: theme.borders_alpha.subtle, - '&:focus': { - backgroundColor: theme.palette_alpha.neutral[0], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.neutral[0], 0.1), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.neutral[0], 0.2), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.neutral[0], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.neutral[0], // override MUI - }, - }, - 'private-root-variant-subtle-color-neutral-size-small': { - padding: '1px 11px', - }, - 'private-root-variant-subtle-color-neutral-size-medium': { - padding: '5px 15px', - }, - 'private-root-variant-subtle-color-red': { - backgroundColor: theme.palette_alpha.red[200], - '&:focus': { - backgroundColor: theme.palette_alpha.red[200], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.red[200], 0.1), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.red[200], 0.2), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.red[200], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.red[200], // override MUI - }, - }, - 'private-root-variant-subtle-color-yellow': { - backgroundColor: theme.palette_alpha.yellow[200], - '&:focus': { - backgroundColor: theme.palette_alpha.yellow[200], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.yellow[200], 0.1), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.yellow[200], 0.2), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.yellow[200], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.yellow[200], // override MUI - }, - }, - 'private-root-variant-subtle-color-teal': { - backgroundColor: theme.palette_alpha.teal[200], - '&:focus': { - backgroundColor: theme.palette_alpha.teal[200], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.teal[200], 0.1), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.teal[200], 0.2), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.teal[200], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.teal[200], // override MUI - }, - }, - 'private-root-variant-subtle-color-green': { - backgroundColor: theme.palette_alpha.green[200], - '&:focus': { - backgroundColor: theme.palette_alpha.green[200], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.green[200], 0.1), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.green[200], 0.2), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.green[200], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.green[200], // override MUI - }, - }, - 'private-root-variant-subtle-color-blue': { - backgroundColor: theme.palette_alpha.blue[200], - '&:focus': { - backgroundColor: theme.palette_alpha.blue[200], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.blue[200], 0.1), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.blue[200], 0.2), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.blue[200], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.blue[200], // override MUI - }, - }, - 'private-root-variant-subtle-color-purple': { - backgroundColor: theme.palette_alpha.purple[200], - '&:focus': { - backgroundColor: theme.palette_alpha.purple[200], // override MUI - }, - '&$private-root-clickable:hover': { - backgroundColor: darken(theme.palette_alpha.purple[200], 0.1), - }, - '&$private-root-clickable:active': { - backgroundColor: darken(theme.palette_alpha.purple[200], 0.2), - }, - '&$private-root-deletable:hover': { - backgroundColor: theme.palette_alpha.purple[200], // override MUI - }, - '&$private-root-deletable:active': { - backgroundColor: theme.palette_alpha.purple[200], // override MUI - }, - }, - 'private-label-size-small': { - ...tagFontVariantSmall, - }, - 'private-label-size-medium': { - ...tagFontVariantMedium, - }, - 'private-icon-size-small': { - fontSize: theme.typography.pxToRem(12), - }, - 'private-icon-size-medium': { - fontSize: theme.typography.pxToRem(16), - }, - 'private-deleteIcon-size-small': { - fontSize: theme.typography.pxToRem(12), - }, - 'private-deleteIcon-size-medium': { - fontSize: theme.typography.pxToRem(16), - }, - 'private-deleteIcon-variant-bold': { - '&:hover': { - backgroundColor: alpha(theme.palette_alpha.neutral[600], 0.2), - }, - '&:active': { - backgroundColor: alpha(theme.palette_alpha.neutral[600], 0.3), - }, - }, - 'private-deleteIcon-variant-subtle': { - '&:hover': { - backgroundColor: alpha(theme.palette_alpha.neutral[600], 0.1), - }, - '&:active': { - backgroundColor: alpha(theme.palette_alpha.neutral[600], 0.2), - }, - }, -}); - -const Tag: OverridableComponent = forwardRef(function Tag( - props, - ref -) { - const { - classes, - color = 'neutral', - onClick, - onDelete, - size = 'medium', - variant = 'bold', - ...other - } = props; - - return ( - } - onClick={onClick} - onDelete={onDelete} - ref={ref} - {...other} - {...(onClick && { - // `disableFocusRipple` leaks to DOM - disableRipple: true, - disableTouchRipple: true, - focusRipple: false, - })} - /> - ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_Tag' })( - Tag -) as typeof Tag; diff --git a/libs/spark/src/alpha/Tag/index.ts b/libs/spark/src/alpha/Tag/index.ts deleted file mode 100644 index dbb9a103e..000000000 --- a/libs/spark/src/alpha/Tag/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Tag'; -export * from './Tag'; diff --git a/libs/spark/src/alpha/TextField/TextField.stories.tsx b/libs/spark/src/alpha/TextField/TextField.stories.tsx deleted file mode 100644 index 87a77569d..000000000 --- a/libs/spark/src/alpha/TextField/TextField.stories.tsx +++ /dev/null @@ -1,354 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { TextFieldProps } from '..'; -import { TextField } from '..'; -import { default as SelectMeta } from '../Select/Select.stories'; -import { - containBoxShadow, - enableHooks, - Gear, - Info, - sparkThemeProvider, - statefulValue, -} from '../../../stories'; - -export const _retyped = TextField as typeof TextField; - -export default { - title: '@ps/TextField', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [statefulValue, enableHooks, containBoxShadow], - args: { - // start component as "controlled" - value: '', - }, - argTypes: { - children: { - control: SelectMeta.argTypes.children.control, - options: ['undefined'].concat(SelectMeta.argTypes.children.options), - mapping: { - undefined: undefined, - ...SelectMeta.argTypes.children.mapping, - }, - }, - leadingEl: { - control: 'select', - options: ['undefined', '$', ''], - mapping: { - undefined: undefined, - $: '$', - '': , - }, - }, - trailingEl: { - control: 'select', - options: ['undefined', 'kg', ''], - mapping: { - undefined: undefined, - kg: 'kg', - '': , - }, - }, - // narrow controls because "raw object" default will crash story - label: { control: 'text' }, - helperText: { control: 'text' }, - value: { control: 'text' }, - minRows: { control: 'number' }, - maxRows: { control: 'number' }, - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const STP: Story = Template.bind({}); -STP.decorators = [sparkThemeProvider]; -STP.storyName = '(STP)'; - -export const LabelHelperText: Story = Template.bind({}); -LabelHelperText.args = { label: 'Label', helperText: 'Helper text' }; -LabelHelperText.storyName = 'label helperText'; - -export const LabelHelperTextHover: Story = Template.bind({}); -LabelHelperTextHover.args = { label: 'Label', helperText: 'Helper text' }; -LabelHelperTextHover.parameters = { pseudo: { hover: true } }; -LabelHelperTextHover.storyName = 'label helperText :hover'; - -export const LabelHelperTextFocusVisible: Story = Template.bind({}); -LabelHelperTextFocusVisible.args = { - label: 'Label', - helperText: 'Helper text', -}; -LabelHelperTextFocusVisible.parameters = { pseudo: { focusVisible: true } }; -LabelHelperTextFocusVisible.storyName = 'label helperText :focus-visible'; - -export const LabelHelperTextDisabled: Story = Template.bind({}); -LabelHelperTextDisabled.args = { - label: 'Label', - helperText: 'Helper text', - disabled: true, -}; -LabelHelperTextDisabled.storyName = 'label helperText disabled'; - -export const LabelHelperTextDisabledHover: Story = Template.bind({}); -LabelHelperTextDisabledHover.args = { - label: 'Label', - helperText: 'Helper text', - disabled: true, -}; -LabelHelperTextDisabledHover.parameters = { pseudo: { hover: true } }; -LabelHelperTextDisabledHover.storyName = 'label helperText disabled :hover'; - -export const LabelHelperTextError: Story = Template.bind({}); -LabelHelperTextError.args = { - label: 'Label', - helperText: 'Helper text', - error: true, -}; -LabelHelperTextError.storyName = 'label helperText error'; - -export const LabelHelperTextFullWidth: Story = Template.bind({}); -LabelHelperTextFullWidth.args = { - label: 'Label', - helperText: 'Helper text', - fullWidth: true, -}; -LabelHelperTextFullWidth.storyName = 'label helperText fullWidth'; - -export const LabelHelperTextLeadingEl: Story = Template.bind({}); -LabelHelperTextLeadingEl.args = { - label: 'Label', - helperText: 'Helper text', - leadingEl: '', -}; -LabelHelperTextLeadingEl.storyName = 'label helperText leadingEl'; - -export const LabelHelperTextSizeSmall: Story = Template.bind({}); -LabelHelperTextSizeSmall.args = { - label: 'Label', - helperText: 'Helper text', - size: 'small', -}; -LabelHelperTextSizeSmall.storyName = 'label helperText size="small"'; - -export const LabelHelperTextSuccess: Story = Template.bind({}); -LabelHelperTextSuccess.args = { - label: 'Label', - helperText: 'Helper text', - success: true, -}; -LabelHelperTextSuccess.storyName = 'label helperText success'; - -export const LabelHelperTextTrailingEl: Story = Template.bind({}); -LabelHelperTextTrailingEl.args = { - label: 'Label', - helperText: 'Helper text', - trailingEl: '', -}; -LabelHelperTextTrailingEl.storyName = 'label helperText trailingEl'; - -export const LabelHelperTextMultilineMinRows: Story = Template.bind({}); -LabelHelperTextMultilineMinRows.args = { - label: 'Label', - helperText: 'Helper text', - multiline: true, - minRows: 3, -}; -LabelHelperTextMultilineMinRows.storyName = - 'label helperText multiline minRows=3'; - -export const LabelHelperTextMultilineMinRowsLeadingEl: Story = Template.bind( - {} -); -LabelHelperTextMultilineMinRowsLeadingEl.args = { - label: 'Label', - helperText: 'Helper text', - multiline: true, - minRows: 3, - leadingEl: '', -}; -LabelHelperTextMultilineMinRowsLeadingEl.storyName = - 'label helperText multiline minRows=3 leadingEl'; - -export const LabelHelperTextMultilineMinRowsTrailingEl: Story = Template.bind( - {} -); -LabelHelperTextMultilineMinRowsTrailingEl.args = { - label: 'Label', - helperText: 'Helper text', - multiline: true, - minRows: 3, - trailingEl: '', -}; -LabelHelperTextMultilineMinRowsTrailingEl.storyName = - 'label helperText multiline minRows=3 trailingEl'; - -export const LabelHelperTextPlaceholder: Story = Template.bind({}); -LabelHelperTextPlaceholder.args = { - label: 'Label', - helperText: 'Helper text', - placeholder: 'Placeholder', -}; -LabelHelperTextPlaceholder.storyName = 'label helperText placeholder'; - -export const LabelHelperTextRequired: Story = Template.bind({}); -LabelHelperTextRequired.args = { - label: 'Label', - helperText: 'Helper text', - required: true, -}; -LabelHelperTextRequired.storyName = 'label helperText required'; - -export const LabelHelperTextValue: Story = Template.bind({}); -LabelHelperTextValue.args = { - label: 'Label', - helperText: 'Helper text', - value: 'Value', -}; -LabelHelperTextValue.storyName = 'label helperText value'; - -export const LabelHelperTextValueHover: Story = Template.bind({}); -LabelHelperTextValueHover.args = { - label: 'Label', - helperText: 'Helper text', - value: 'Value', -}; -LabelHelperTextValueHover.parameters = { pseudo: { hover: true } }; -LabelHelperTextValueHover.storyName = 'label helperText value :hover'; - -export const LabelHelperTextValueFocusVisible: Story = Template.bind({}); -LabelHelperTextValueFocusVisible.args = { - label: 'Label', - helperText: 'Helper text', - value: 'Value', -}; -LabelHelperTextValueFocusVisible.parameters = { - pseudo: { focusVisible: true }, -}; -LabelHelperTextValueFocusVisible.storyName = - 'label helperText value :focus-visible'; - -export const LabelHelperTextValueDisabled: Story = Template.bind({}); -LabelHelperTextValueDisabled.args = { - label: 'Label', - helperText: 'Helper text', - value: 'Value', - disabled: true, -}; -LabelHelperTextValueDisabled.storyName = 'label helperText value disabled'; - -export const LabelHelperTextValueError: Story = Template.bind({}); -LabelHelperTextValueError.args = { - label: 'Label', - helperText: 'Helper text', - value: 'Value', - error: true, -}; -LabelHelperTextValueError.storyName = 'label helperText value error'; - -export const LabelHelperTextValueRequired: Story = Template.bind({}); -LabelHelperTextValueRequired.args = { - label: 'Label', - helperText: 'Helper text', - value: 'Value', - required: true, -}; -LabelHelperTextValueRequired.storyName = 'label helperText value required'; - -export const LabelHelperTextValueSuccess: Story = Template.bind({}); -LabelHelperTextValueSuccess.args = { - label: 'Label', - helperText: 'Helper text', - value: 'Value', - success: true, -}; -LabelHelperTextValueSuccess.storyName = 'label helperText value success'; - -export const LabelHelperTextSelect: Story = Template.bind({}); -LabelHelperTextSelect.args = { - label: 'Label', - helperText: 'Helper text', - value: '', - select: true, - children: '(MenuItem x6)', -}; -LabelHelperTextSelect.storyName = 'label helperText select'; - -export const LabelHelperTextSelectValue: Story = Template.bind({}); -LabelHelperTextSelectValue.args = { - label: 'Label', - helperText: 'Helper text', - select: true, - children: '(MenuItem x6)', - value: 'value-1', -}; -LabelHelperTextSelectValue.storyName = 'label helperText select value'; - -export const LabelHelperTextSelectValueDisabled: Story = Template.bind({}); -LabelHelperTextSelectValueDisabled.args = { - label: 'Label', - helperText: 'Helper text', - select: true, - children: '(MenuItem x6)', - value: 'value-1', - disabled: true, -}; -LabelHelperTextSelectValueDisabled.storyName = - 'label helperText select value disabled'; - -export const LabelHelperTextSelectValueError: Story = Template.bind({}); -LabelHelperTextSelectValueError.args = { - label: 'Label', - helperText: 'Helper text', - select: true, - children: '(MenuItem x6)', - value: 'value-1', - error: true, -}; -LabelHelperTextSelectValueError.storyName = - 'label helperText select value error'; - -export const LabelHelperTextSelectValueSuccess: Story = Template.bind({}); -LabelHelperTextSelectValueSuccess.args = { - label: 'Label', - helperText: 'Helper text', - select: true, - children: '(MenuItem x6)', - value: 'value-1', - success: true, -}; -LabelHelperTextSelectValueSuccess.storyName = - 'label helperText select value success'; - -export const LabelHelperTextSelectMultiple: Story = Template.bind({}); -LabelHelperTextSelectMultiple.args = { - label: 'Label', - helperText: 'Helper text', - value: [], - select: true, - children: '(MenuItem x6)', - SelectProps: { - multiple: true, - }, -}; -LabelHelperTextSelectMultiple.storyName = - 'label helperText select multiple value=[]'; - -export const LabelHelperTextSelectMultipleValues: Story = Template.bind({}); -LabelHelperTextSelectMultipleValues.args = { - label: 'Label', - helperText: 'Helper text', - value: ['value-1', 'value-2'], - select: true, - children: '(MenuItem x6)', - SelectProps: { - multiple: true, - }, -}; -LabelHelperTextSelectMultipleValues.storyName = - 'label helperText select multiple value=[...]'; diff --git a/libs/spark/src/alpha/TextField/TextField.test.tsx b/libs/spark/src/alpha/TextField/TextField.test.tsx deleted file mode 100644 index e0715348e..000000000 --- a/libs/spark/src/alpha/TextField/TextField.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import TextField from './TextField'; - -describe('TextField', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/TextField/TextField.tsx b/libs/spark/src/alpha/TextField/TextField.tsx deleted file mode 100644 index 53c911498..000000000 --- a/libs/spark/src/alpha/TextField/TextField.tsx +++ /dev/null @@ -1,225 +0,0 @@ -import type { InputHTMLAttributes, ReactNode, Ref, RefObject } from 'react'; -import React, { forwardRef } from 'react'; -import type { InputProps } from '../Input'; -import Input from '../Input'; -import type { FormLabelProps } from '../FormLabel'; -import FormLabel from '../FormLabel'; -import type { FormControlProps } from '../FormControl'; -import FormControl from '../FormControl'; -import type { FormHelperTextProps } from '../FormHelperText'; -import FormHelperText from '../FormHelperText'; -import type { SelectProps } from '../Select'; -import Select from '../Select'; - -export interface TextFieldProps - extends Omit< - FormControlProps, - // event handlers are declared on derived interfaces - 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue' - > { - /** - * This prop helps users to fill forms faster, especially on mobile devices. - * The name can be confusing, as it's more like an autofill. - * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). - */ - autoComplete?: string; - /** - * If `true`, the `input` element will be focused during the first mount. - */ - autoFocus?: boolean; - /** - * @ignore - */ - children?: ReactNode; - /** - * The default value of the `input` element. - */ - defaultValue?: unknown; - /** - * Props applied to the `FormHelperText` element. - */ - FormHelperTextProps?: Partial; - /** - * Props applied to the `FormLabel` element. - */ - FormLabelProps?: Partial; - /** - * The helper text content. - */ - helperText?: ReactNode; - /** - * The id of the `input` element. - * Use this prop to make `label` and `helperText` accessible for screen readers. - */ - id?: string; - /** - * Props applied to the Input element. - */ - InputProps?: Partial; - /** - * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. - */ - inputProps?: InputProps['inputProps']; - /** - * Pass a ref to the `input` element. - */ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - inputRef?: Ref; - /** - * The label content. - */ - label?: ReactNode; - /** - * The content of the `startAdornment` (InputAdornment), usually an Icon, IconButton, or string. - */ - leadingEl?: ReactNode; - /** - * If `true`, a textarea element will be rendered instead of an input. - */ - multiline?: boolean; - /** - * Name attribute of the `input` element. - */ - name?: string; - onBlur?: InputProps['onBlur']; - /** - * Callback fired when the value is changed. - * - * @param {object} event The event source of the callback. - * You can pull out the new value by accessing `event.target.value` (string). - */ - onChange?: InputProps['onChange']; - onFocus?: InputProps['onFocus']; - /** - * The short hint displayed in the input before the user enters a value. - */ - placeholder?: string; - /** - * Maximum number of rows to display when multiline option is set to true. - */ - maxRows?: string | number; - /** - * Minimum number of rows to display. - */ - minRows?: string | number; - /** - * Render a `Select` element while passing the `Input` element to `Select` as `input` parameter. - * If this option is set you must pass the options of the select as children. - */ - select?: boolean; - /** - * Props applied to the `Select` element. - */ - SelectProps?: Partial; - /** - * The content of the `endAdornment` (an `InputAdornment`), usually an `Icon`, `IconButton`, or `string`. - */ - trailingEl?: ReactNode; - /** - * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). - */ - type?: InputHTMLAttributes['type']; - /** - * The value of the `input` element, required for a controlled component. - */ - value?: unknown; -} - -/** - * @deprecated Compose the Form Control pattern directly. - */ -const TextField = forwardRef(function TextField( - props, - ref -) { - const { - autoComplete, - autoFocus = false, - children, - defaultValue, - FormHelperTextProps, - helperText, - FormLabelProps, - inputProps, - InputProps, - inputRef, - leadingEl, - label, - multiline = false, - name, - onBlur, - onChange, - onFocus, - placeholder, - maxRows, - minRows, - select = false, - SelectProps, - trailingEl, - type, - value, - ...other - } = props; - - if (process.env.NODE_ENV !== 'production') { - if (select && !children) { - console.error( - 'Prenda Spark: Material-UI: `children` must be passed when using the `TextField` component with `select`.' - ); - } - } - - const InputMore: Partial = {}; - - if (select) { - // unset defaults from textbox inputs - if (!SelectProps || !SelectProps.native) { - InputMore.id = undefined; - } - InputMore['aria-describedby'] = undefined; - } - - const InputElement = ( - - ); - - return ( - } {...other}> - {label ? {label} : null} - - {select ? ( - - ) : ( - InputElement - )} - - {helperText ? ( - {helperText} - ) : null} - - ); -}); - -export default TextField; diff --git a/libs/spark/src/alpha/TextField/index.ts b/libs/spark/src/alpha/TextField/index.ts deleted file mode 100644 index ef5254f3c..000000000 --- a/libs/spark/src/alpha/TextField/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './TextField'; -export * from './TextField'; diff --git a/libs/spark/src/alpha/Toast/Toast.stories.tsx b/libs/spark/src/alpha/Toast/Toast.stories.tsx deleted file mode 100644 index b3f5dd18e..000000000 --- a/libs/spark/src/alpha/Toast/Toast.stories.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { ToastProps } from '..'; -import { Toast } from '..'; -import { Email } from '../../../stories'; - -export default { - title: '@ps/Toast', - component: Toast, - args: { - children: <>Message, - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const Icon: Story = Template.bind({}); -Icon.args = { icon: }; -Icon.storyName = 'icon'; - -const onClose = () => { - return; -}; - -export const OnClose: Story = Template.bind({}); -OnClose.args = { onClose }; -OnClose.storyName = 'onClose'; - -export const SeverityInfo: Story = Template.bind({}); -SeverityInfo.args = { severity: 'info' }; -SeverityInfo.storyName = 'severity=info'; - -export const SeverityWarning: Story = Template.bind({}); -SeverityWarning.args = { severity: 'warning' }; -SeverityWarning.storyName = 'severity=warning'; - -export const SeveritySuccess: Story = Template.bind({}); -SeveritySuccess.args = { severity: 'success' }; -SeveritySuccess.storyName = 'severity=success'; - -export const SeverityError: Story = Template.bind({}); -SeverityError.args = { severity: 'error' }; -SeverityError.storyName = 'severity=error'; diff --git a/libs/spark/src/alpha/Toast/Toast.test.tsx b/libs/spark/src/alpha/Toast/Toast.test.tsx deleted file mode 100644 index b051d7131..000000000 --- a/libs/spark/src/alpha/Toast/Toast.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import Toast from './Toast'; - -describe('Toast', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(Message); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Toast/Toast.tsx b/libs/spark/src/alpha/Toast/Toast.tsx deleted file mode 100644 index 012fbbe2c..000000000 --- a/libs/spark/src/alpha/Toast/Toast.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { AlertClassKey, AlertProps } from '../internal/Alert'; -import Alert from '../internal/Alert'; -import type { StandardProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface ToastProps extends StandardProps {} - -export type ToastClassKey = AlertClassKey; - -type PrivateClassKey = - | 'private-icon-severity-error' - | 'private-icon-severity-info' - | 'private-icon-severity-success' - | 'private-icon-severity-warning'; - -const styles: Styles = (theme) => ({ - root: { - alignItems: 'center', - backgroundColor: theme.palette_alpha.background.inverse, - color: theme.palette_alpha.text.inverseBody, - borderRadius: theme.radii_alpha.sm, - display: 'flex', - gap: 8, - minHeight: 54, - padding: '11px 16px', - }, - icon: { - display: 'flex', - fontSize: theme.typography_alpha.pxToRem(24), - lineHeight: 1, - }, - message: { - ...theme.typography_alpha.body, - flexGrow: 2, - }, - action: { - alignSelf: 'flex-start', - justifySelf: 'flex-end', - }, - /* Private */ - 'private-icon-severity-error': { - color: theme.palette_alpha.red[400], - }, - 'private-icon-severity-info': { - color: theme.palette_alpha.blue[300], - }, - 'private-icon-severity-success': { - color: theme.palette_alpha.green[400], - }, - 'private-icon-severity-warning': { - color: theme.palette_alpha.yellow[400], - }, -}); - -const Toast = forwardRef(function Toast(props, ref) { - const { - children, - classes, - CloseProps, - icon: iconProp, - onClose, - severity, - ...other - } = props; - - const icon = - iconProp !== undefined - ? iconProp - : severity !== undefined - ? undefined - : false; - - return ( - - {children} - - ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_Toast' })( - Toast -) as typeof Toast; diff --git a/libs/spark/src/alpha/Toast/index.ts b/libs/spark/src/alpha/Toast/index.ts deleted file mode 100644 index c45b2140b..000000000 --- a/libs/spark/src/alpha/Toast/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Toast'; -export * from './Toast'; diff --git a/libs/spark/src/alpha/ToastsContext/ToastsContext.d.ts b/libs/spark/src/alpha/ToastsContext/ToastsContext.d.ts deleted file mode 100644 index 3583b0dae..000000000 --- a/libs/spark/src/alpha/ToastsContext/ToastsContext.d.ts +++ /dev/null @@ -1,68 +0,0 @@ -import type { - OptionsObject as NotistackOptionsObject, - SnackbarKey as NotistackSnackbarKey, -} from 'notistack'; -import type { ReactNode } from 'react'; -import type { ToastProps } from '../Toast/Toast'; - -export type ToastId = NotistackSnackbarKey; - -export interface ToastsContextValue { - /** - * Dismiss a specific toast by its `id`, returned from `enqueue`. - */ - close: (id: ToastId) => void; - /** - * Dismiss all open toasts. - */ - closeAll: () => void; - /** - * Add a toast to the queue to be displayed to the user. - * @param children The children of the Toast. - * @param options The options processed by Toasts and Toast. - * @returns an id to reference that toast later on (i.e. dismiss it programmatically) - */ - enqueue: ConvenienceEnqueue; -} - -export type _Enqueue = ( - children: ReactNode, - options?: EnqueueOptions -) => ToastId; - -type ConvenienceEnqueue = { - (children: ReactNode, options?: EnqueueOptions): ToastId; - error: _Enqueue; - info: _Enqueue; - success: _Enqueue; - warning: _Enqueue; -}; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -interface EnqueueOptions - extends Omit< - NotistackOptionsObject, - | 'action' - | 'anchorOrigin' - | 'key' - | 'variant' - | 'hideIconVariant' - | 'content' - >, - Pick { - /** - * Whether a close button should be shown at the end of the component. - */ - closeable?: boolean; - /** - * Unique identifier to reference a toast. - */ - id?: ToastId; - /** - * The placement of toast on the screen. - * @default 'bottom-left' - */ - placement?: 'bottom-left' | 'bottom-center' | 'bottom-right'; -} - -export type ToastsContextEnqueueOptions = EnqueueOptions; diff --git a/libs/spark/src/alpha/ToastsContext/index.ts b/libs/spark/src/alpha/ToastsContext/index.ts deleted file mode 100644 index 9baf46acd..000000000 --- a/libs/spark/src/alpha/ToastsContext/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ToastsContext'; diff --git a/libs/spark/src/alpha/ToastsProvider/ToastsProvider.stories.tsx b/libs/spark/src/alpha/ToastsProvider/ToastsProvider.stories.tsx deleted file mode 100644 index 07c50368f..000000000 --- a/libs/spark/src/alpha/ToastsProvider/ToastsProvider.stories.tsx +++ /dev/null @@ -1,234 +0,0 @@ -import type { ReactNode } from 'react'; -import React, { useState } from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { ToastsProviderProps } from '..'; -import { ToastsProvider, Button, useToasts } from '..'; -import { Email, enableHooks, largeWidth } from '../../../stories'; - -export const _retyped = ToastsProvider as typeof ToastsProvider; - -export default { - title: '@ps/ToastsProvider', - chromatic: { disableSnapshots: true }, - component: _retyped, - excludeStories: ['_retyped'], - decorators: [enableHooks, largeWidth], -} as Meta; - -const Template = (args) => ( - - - -); - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const Limit: Story = Template.bind({}); -Limit.args = { limit: 5 }; -Limit.storyName = 'limit=5'; - -/* Children */ - -const messageNode = ( - - Text - - -); - -const Children = () => { - const toasts = useToasts(); - - const [ids, setIds] = useState>>([]); - - const handleClickWith = - (children: ReactNode, options?: Parameters[1]) => - () => { - const id = toasts.enqueue(children, options); - setIds((ids) => ids.concat(id)); - }; - - const handleCloseLastClick = () => { - toasts.close(ids[ids.length - 1]); - setIds((ids) => ids.slice(0, -1)); - }; - - const handleCloseAllClick = () => { - toasts.closeAll(); - }; - - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/libs/spark/src/alpha/ToastsProvider/ToastsProvider.test.tsx b/libs/spark/src/alpha/ToastsProvider/ToastsProvider.test.tsx deleted file mode 100644 index 03e856260..000000000 --- a/libs/spark/src/alpha/ToastsProvider/ToastsProvider.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { render } from '@testing-library/react'; -import ToastsProvider from './ToastsProvider'; - -describe('ToastsProvider', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - -
    - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/ToastsProvider/ToastsProvider.tsx b/libs/spark/src/alpha/ToastsProvider/ToastsProvider.tsx deleted file mode 100644 index 63636ae36..000000000 --- a/libs/spark/src/alpha/ToastsProvider/ToastsProvider.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import type { - CustomContentProps as NotistackCustomContentProps, - SnackbarProviderProps as NotistackSnackbarProviderProps, -} from 'notistack'; -import { SnackbarProvider as NotistackSnackbarProvider } from 'notistack'; -import type { JSXElementConstructor } from 'react'; -import React, { forwardRef } from 'react'; -import type { ToastProps } from '../Toast'; -import Toast from '../Toast'; -import useToasts from '../useToasts'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface ToastsProviderProps - extends Omit< - NotistackSnackbarProviderProps, - 'Components' | 'dense' | 'iconVariant' | 'maxSnack' - > { - /** - * Mapping between a variant and custom component. - */ - Components?: { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - [key: string]: JSXElementConstructor; - }; - /** - * The limit of toasts that can be stacked on top of one another. - * @default 3 - */ - limit?: number; -} - -const Default = forwardRef< - unknown, - NotistackCustomContentProps & { - closeable?: boolean; - } ->((props, ref) => { - const { - action, - anchorOrigin, - autoHideDuration, - closeable, - hideIconVariant, - id, - iconVariant, - message, - persist, - variant, - ...other - } = props; - - const toasts = useToasts(); - - const onClose: ToastProps['onClose'] = closeable - ? () => { - toasts.close(id); - } - : undefined; - - return ( - - {message} - - ); -}); - -function ToastsProvider(props: ToastsProviderProps) { - const { Components, limit, ...other } = props; - - return ( - - ); -} - -export default ToastsProvider; diff --git a/libs/spark/src/alpha/ToastsProvider/index.ts b/libs/spark/src/alpha/ToastsProvider/index.ts deleted file mode 100644 index 1c67ba391..000000000 --- a/libs/spark/src/alpha/ToastsProvider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ToastsProvider'; -export * from './ToastsProvider'; diff --git a/libs/spark/src/alpha/Tooltip/Tooltip.stories.tsx b/libs/spark/src/alpha/Tooltip/Tooltip.stories.tsx deleted file mode 100644 index 7d1814235..000000000 --- a/libs/spark/src/alpha/Tooltip/Tooltip.stories.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { TooltipProps } from '..'; -import { IconButton, Tooltip, Typography } from '..'; -import { Plus } from '../../../stories'; -import type { DecoratorFn } from '@storybook/react'; - -export const _retyped = Tooltip as typeof Tooltip; - -const pad: DecoratorFn = (Story, context) => ( -
    - -
    -); - -export default { - title: '@ps/Tooltip', - component: _retyped, - excludeStories: ['_retyped'], - decorators: [pad], - parameters: { - chromatic: { delay: 3000 }, - }, - args: { - title: 'Title', - }, -} as Meta; - -const Template = (args) => ( - - - - - -); - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const OpenTextOverflow: Story = Template.bind({}); -OpenTextOverflow.args = { - open: true, - title: - 'Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.', -}; -OpenTextOverflow.storyName = 'open title=(text overflow)'; - -export const OpenMultipleParagraphs: Story = Template.bind({}); -OpenMultipleParagraphs.args = { - open: true, - title: ( - <> - Paragraph one. - Paragraph two. - - ), -}; -OpenMultipleParagraphs.storyName = 'open title=(multiple paragraphs)'; - -export const OpenPlacementBottom: Story = Template.bind({}); -OpenPlacementBottom.args = { open: true, placement: 'bottom' }; -OpenPlacementBottom.storyName = 'open placement=bottom'; - -export const OpenPlacementRight: Story = Template.bind({}); -OpenPlacementRight.args = { open: true, placement: 'right' }; -OpenPlacementRight.storyName = 'open placement=right'; - -export const OpenPlacementTop: Story = Template.bind({}); -OpenPlacementTop.args = { open: true, placement: 'top' }; -OpenPlacementTop.storyName = 'open placement=top'; - -export const OpenPlacementLeft: Story = Template.bind({}); -OpenPlacementLeft.args = { open: true, placement: 'left' }; -OpenPlacementLeft.storyName = 'open placement=left'; diff --git a/libs/spark/src/alpha/Tooltip/Tooltip.test.tsx b/libs/spark/src/alpha/Tooltip/Tooltip.test.tsx deleted file mode 100644 index 449094d44..000000000 --- a/libs/spark/src/alpha/Tooltip/Tooltip.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { render } from '@testing-library/react'; -import Tooltip from './Tooltip'; - -describe('Tooltip', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render( - - - - ); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Tooltip/Tooltip.tsx b/libs/spark/src/alpha/Tooltip/Tooltip.tsx deleted file mode 100644 index f374efff3..000000000 --- a/libs/spark/src/alpha/Tooltip/Tooltip.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import type { TooltipProps as MuiTooltipProps } from '@material-ui/core/Tooltip'; -import { default as MuiTooltip } from '@material-ui/core/Tooltip'; -import clsx from 'clsx'; -import React, { forwardRef } from 'react'; -import type { StyledComponentProps, Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface TooltipProps - extends Omit, - StyledComponentProps {} - -export type TooltipClassKey = 'arrow' | 'tooltip' | 'popper'; - -type PrivateClassKey = - | 'private-arrow-placement-bottom' - | 'private-arrow-placement-left' - | 'private-arrow-placement-right' - | 'private-arrow-placement-top' - | 'private-tooltip-placement-bottom' - | 'private-tooltip-placement-left' - | 'private-tooltip-placement-right' - | 'private-tooltip-placement-top'; - -const styles: Styles = (theme) => ({ - arrow: { - color: theme.palette_alpha.neutral[600], - }, - 'private-arrow-placement-bottom': { - '&::before': { - borderTopLeftRadius: 4, - }, - }, - 'private-arrow-placement-left': { - '&::before': { - borderTopRightRadius: 4, - }, - }, - 'private-arrow-placement-right': { - '&::before': { - borderBottomLeftRadius: 4, - }, - }, - 'private-arrow-placement-top': { - '&::before': { - borderBottomRightRadius: 4, - }, - }, - tooltip: { - ...theme.typography_alpha.body, - alignItems: 'flex-start', - backgroundColor: theme.palette_alpha.neutral[600], - borderRadius: theme.radii_alpha.md, - color: theme.palette_alpha.neutral[80], - display: 'flex', - flexDirection: 'column', - gap: 24, - maxWidth: 256, - padding: '8px 12px', - }, - 'private-tooltip-placement-bottom': { - marginTop: 15, - }, - 'private-tooltip-placement-left': { - marginRight: 15, - }, - 'private-tooltip-placement-top': { - marginBottom: 15, - }, - 'private-tooltip-placement-right': { - marginLeft: 15, - }, - popper: {}, -}); - -const Tooltip = forwardRef(function Tooltip(props, ref) { - const { - arrow = true, - classes, - // match MUI default `enterDelay` - enterTouchDelay = 100, - interactive = true, - // match MUI default `leaveDelay` - leaveTouchDelay = 0, - placement = 'bottom', - ...other - } = props; - - return ( - - ); -}); - -export default withStyles(styles, { name: 'MuiSpark_alpha_Tooltip' })( - Tooltip -) as typeof Tooltip; diff --git a/libs/spark/src/alpha/Tooltip/index.ts b/libs/spark/src/alpha/Tooltip/index.ts deleted file mode 100644 index de73a9e2b..000000000 --- a/libs/spark/src/alpha/Tooltip/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Tooltip'; -export * from './Tooltip'; diff --git a/libs/spark/src/alpha/TopBar/TopBar.spec.tsx b/libs/spark/src/alpha/TopBar/TopBar.spec.tsx deleted file mode 100644 index fe882d7a3..000000000 --- a/libs/spark/src/alpha/TopBar/TopBar.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import TopBar from './TopBar'; - -describe('TopBar', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/TopBar/TopBar.stories.tsx b/libs/spark/src/alpha/TopBar/TopBar.stories.tsx deleted file mode 100644 index 129bf2567..000000000 --- a/libs/spark/src/alpha/TopBar/TopBar.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { TopBarProps } from '..'; -import { TopBar } from '..'; - -export const _retyped = TopBar as typeof TopBar; - -export default { - title: '@ps/TopBar', - component: _retyped, - excludeStories: ['_retyped'], -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const ColorStandard: Story = Template.bind({}); -ColorStandard.args = { color: 'standard' }; -ColorStandard.storyName = 'color=standard'; - -export const ColorBrand: Story = Template.bind({}); -ColorBrand.args = { color: 'brand' }; -ColorBrand.storyName = 'color=brand'; - -export const ColorInverse: Story = Template.bind({}); -ColorInverse.args = { color: 'inverse' }; -ColorInverse.storyName = 'color=inverse'; - -export const ColorAlternative: Story = Template.bind({}); -ColorAlternative.args = { color: 'alternative' }; -ColorAlternative.storyName = 'color=alternative'; - -export const ColorTransparent: Story = Template.bind({}); -ColorTransparent.args = { color: 'transparent' }; -ColorTransparent.storyName = 'color=transparent'; diff --git a/libs/spark/src/alpha/TopBar/TopBar.tsx b/libs/spark/src/alpha/TopBar/TopBar.tsx deleted file mode 100644 index 369d4d3a5..000000000 --- a/libs/spark/src/alpha/TopBar/TopBar.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import type { AppBarProps as MuiAppBarProps } from '@material-ui/core/AppBar'; -import { default as MuiAppBar } from '@material-ui/core/AppBar'; -import clsx from 'clsx'; -import React, { forwardRef } from 'react'; -import type { StandardProps } from '../../utils'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface TopBarProps - extends StandardProps< - MuiAppBarProps, - TopBarClassKey, - 'classes' | 'color' | 'elevation' | 'square' | 'variant' - > { - /** - * The color of the component. - */ - color?: 'standard' | 'inverse' | 'brand' | 'transparent' | 'alternative'; -} - -export type TopBarClassKey = 'root'; - -type PrivateClassKey = - | 'private-root-color-alternative' - | 'private-root-color-inverse' - | 'private-root-color-brand' - | 'private-root-color-standard' - | 'private-root-color-transparent'; - -const styles: Styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - borderBottom: theme.borders_alpha.standard, - borderColor: theme.palette_alpha.neutral[80], - minHeight: 64, - [theme.breakpoints.down('sm')]: { - minHeight: 48, - }, - }, - /* Private */ - 'private-root-color-alternative': { - backgroundColor: theme.palette_alpha.background.alternative, - }, - 'private-root-color-brand': { - backgroundColor: theme.palette_alpha.background.brand, - borderColor: theme.palette_alpha.neutral[600], - }, - 'private-root-color-inverse': { - backgroundColor: theme.palette_alpha.background.inverse, - borderColor: theme.palette_alpha.neutral[0], - }, - 'private-root-color-standard': { - backgroundColor: theme.palette_alpha.background.default, - }, - 'private-root-color-transparent': { - backgroundColor: 'transparent', - }, -}); - -const UnstyledTopBar = forwardRef(function TopBar( - props, - ref -) { - const { classes, color = 'standard', ...other } = props; - - return ( - - ); -}); - -const TopBar = withStyles(styles, { - name: 'MuiSpark_alpha_TopBar', -})(UnstyledTopBar) as typeof UnstyledTopBar; - -export default TopBar; diff --git a/libs/spark/src/alpha/TopBar/index.ts b/libs/spark/src/alpha/TopBar/index.ts deleted file mode 100644 index 3678740af..000000000 --- a/libs/spark/src/alpha/TopBar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './TopBar'; -export * from './TopBar'; diff --git a/libs/spark/src/alpha/Typography/Typography.spec.tsx b/libs/spark/src/alpha/Typography/Typography.spec.tsx deleted file mode 100644 index ee1dbc6a2..000000000 --- a/libs/spark/src/alpha/Typography/Typography.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; -import Typography from './Typography'; - -describe('Typography', () => { - it('Can render without ThemeProvider', () => { - const { baseElement } = render(); - - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/Typography/Typography.stories.tsx b/libs/spark/src/alpha/Typography/Typography.stories.tsx deleted file mode 100644 index 1d95b8b69..000000000 --- a/libs/spark/src/alpha/Typography/Typography.stories.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0'; -import type { TypographyProps } from '..'; -import { Typography } from '..'; -import { inverseBackground, sparkThemeProvider } from '../../../stories'; - -export const _retyped = Typography as typeof Typography; - -export default { - title: '@ps/Typography', - component: _retyped, - excludeStories: ['_retyped'], - args: { - children: <>typography, - }, -} as Meta; - -const Template = (args) => ; - -type Story = DefaultStory; - -export const Default: Story = Template.bind({}); -Default.storyName = '(default)'; - -export const STP: Story = Template.bind({}); -STP.decorators = [sparkThemeProvider]; -STP.storyName = '(STP)'; - -export const VariantDisplay: Story = Template.bind({}); -VariantDisplay.args = { variant: 'display' }; -VariantDisplay.storyName = 'variant=display'; - -export const VariantT32: Story = Template.bind({}); -VariantT32.args = { variant: 'T32' }; -VariantT32.storyName = 'variant=T32'; - -export const VariantT28: Story = Template.bind({}); -VariantT28.args = { variant: 'T28' }; -VariantT28.storyName = 'variant=T28'; - -export const VariantT22: Story = Template.bind({}); -VariantT22.args = { variant: 'T22' }; -VariantT22.storyName = 'variant=T22'; - -export const VariantT18: Story = Template.bind({}); -VariantT18.args = { variant: 'T18' }; -VariantT18.storyName = 'variant=T18'; - -export const VariantT14: Story = Template.bind({}); -VariantT14.args = { variant: 'T14' }; -VariantT14.storyName = 'variant=T14'; - -export const VariantLabel: Story = Template.bind({}); -VariantLabel.args = { variant: 'label' }; -VariantLabel.storyName = 'variant=label'; - -export const VariantBody: Story = Template.bind({}); -VariantBody.args = { variant: 'body' }; -VariantBody.storyName = 'variant=body'; - -export const VariantBodyStrong: Story = Template.bind({}); -VariantBodyStrong.args = { - variant: 'body', - children: typography, -}; -VariantBodyStrong.storyName = 'variant=body children='; - -export const VariantDescription: Story = Template.bind({}); -VariantDescription.args = { variant: 'description' }; -VariantDescription.storyName = 'variant=description'; - -export const VariantDescriptionStrong: Story = Template.bind({}); -VariantDescriptionStrong.args = { - variant: 'description', - children: typography, -}; -VariantDescriptionStrong.storyName = 'variant=description children='; - -export const VariantCode: Story = Template.bind({}); -VariantCode.args = { variant: 'code' }; -VariantCode.storyName = 'variant=code'; - -export const ColorInverse: Story = Template.bind({}); -ColorInverse.args = { color: 'inverse' }; -ColorInverse.decorators = [inverseBackground]; -ColorInverse.storyName = 'color=inverse'; diff --git a/libs/spark/src/alpha/Typography/Typography.tsx b/libs/spark/src/alpha/Typography/Typography.tsx deleted file mode 100644 index fe4839707..000000000 --- a/libs/spark/src/alpha/Typography/Typography.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import type { ElementType } from 'react'; -import React, { forwardRef } from 'react'; -import clsx from 'clsx'; -import type { TypographyProps as MuiTypographyProps } from '@material-ui/core/Typography'; -import { default as MuiTypography } from '@material-ui/core/Typography'; -import type { OverridableComponent, OverrideProps } from '../../utils'; -import type { TypographyVariant } from '../theme/typography'; -import type { Styles } from '../../withStyles'; -import withStyles from '../../withStyles'; - -export interface TypographyTypeMap< - // eslint-disable-next-line @typescript-eslint/ban-types - P = {}, - D extends ElementType = 'span' -> { - props: P & - Omit< - MuiTypographyProps, - 'classes' | 'variant' | 'variantMapping' | 'color' - > & { - variant?: - | 'display' - | 'T32' - | 'T28' - | 'T22' - | 'T18' - | 'T14' - | 'body' - | 'label' - | 'description' - | 'code'; - color?: 'inherit' | 'normal' | 'inverse'; - }; - defaultComponent: D; - classKey: TypographyClassKey; -} - -export type TypographyProps< - D extends ElementType = TypographyTypeMap['defaultComponent'], - // eslint-disable-next-line @typescript-eslint/ban-types - P = {} -> = OverrideProps, D>; - -export type TypographyClassKey = 'root'; - -type PrivateClassKey = - | 'private-color-inherit' - | 'private-color-normal' - | 'private-color-inverse' - | 'private-variant-display' - | 'private-variant-T32' - | 'private-variant-T28' - | 'private-variant-T22' - | 'private-variant-T18' - | 'private-variant-T14' - | 'private-variant-body' - | 'private-variant-label' - | 'private-variant-description' - | 'private-variant-code' - | 'private-color-normal-variant-display' - | 'private-color-normal-variant-T32' - | 'private-color-normal-variant-T28' - | 'private-color-normal-variant-T22' - | 'private-color-normal-variant-T18' - | 'private-color-normal-variant-T14' - | 'private-color-normal-variant-body' - | 'private-color-normal-variant-label' - | 'private-color-normal-variant-description' - | 'private-color-normal-variant-code' - | 'private-color-inverse-variant-display' - | 'private-color-inverse-variant-T32' - | 'private-color-inverse-variant-T28' - | 'private-color-inverse-variant-T22' - | 'private-color-inverse-variant-T18' - | 'private-color-inverse-variant-T14' - | 'private-color-inverse-variant-body' - | 'private-color-inverse-variant-label' - | 'private-color-inverse-variant-description' - | 'private-color-inverse-variant-code'; - -const styles: Styles = (theme) => ({ - root: {}, - 'private-color-normal': {}, - 'private-color-inverse': {}, - 'private-color-inherit': { - color: 'inherit', - }, - 'private-variant-display': { - ...theme.typography_alpha.display, - }, - 'private-variant-T32': { - ...theme.typography_alpha['T32'], - }, - 'private-variant-T28': { - ...theme.typography_alpha['T28'], - }, - 'private-variant-T22': { - ...theme.typography_alpha['T22'], - }, - 'private-variant-T18': { - ...theme.typography_alpha['T18'], - }, - 'private-variant-T14': { - ...theme.typography_alpha['T14'], - }, - 'private-variant-body': { - ...theme.typography_alpha['body'], - '& strong, b': { - fontWeight: 600, - }, - }, - 'private-variant-label': { - ...theme.typography_alpha['label'], - }, - 'private-variant-description': { - ...theme.typography_alpha['description'], - '& strong, b': { - fontWeight: 700, - }, - }, - 'private-variant-code': { - ...theme.typography_alpha['code'], - }, - 'private-color-normal-variant-display': { - color: theme.palette_alpha.text.heading, - }, - 'private-color-normal-variant-T32': { - color: theme.palette_alpha.text.heading, - }, - 'private-color-normal-variant-T28': { - color: theme.palette_alpha.text.heading, - }, - 'private-color-normal-variant-T22': { - color: theme.palette_alpha.text.heading, - }, - 'private-color-normal-variant-T18': { - color: theme.palette_alpha.text.heading, - }, - 'private-color-normal-variant-T14': { - color: theme.palette_alpha.text.heading, - }, - 'private-color-normal-variant-body': { - color: theme.palette_alpha.text.body, - }, - 'private-color-normal-variant-label': { - color: theme.palette_alpha.text.body, - }, - 'private-color-normal-variant-description': { - color: theme.palette_alpha.text.body, - }, - 'private-color-normal-variant-code': { - color: theme.palette_alpha.text.body, - }, - 'private-color-inverse-variant-display': { - color: theme.palette_alpha.text.inverseHeading, - }, - 'private-color-inverse-variant-T32': { - color: theme.palette_alpha.text.inverseHeading, - }, - 'private-color-inverse-variant-T28': { - color: theme.palette_alpha.text.inverseHeading, - }, - 'private-color-inverse-variant-T22': { - color: theme.palette_alpha.text.inverseHeading, - }, - 'private-color-inverse-variant-T18': { - color: theme.palette_alpha.text.inverseHeading, - }, - 'private-color-inverse-variant-T14': { - color: theme.palette_alpha.text.inverseHeading, - }, - 'private-color-inverse-variant-body': { - color: theme.palette_alpha.text.inverseBody, - }, - 'private-color-inverse-variant-label': { - color: theme.palette_alpha.text.inverseBody, - }, - 'private-color-inverse-variant-description': { - color: theme.palette_alpha.text.inverseBody, - }, - 'private-color-inverse-variant-code': { - color: theme.palette_alpha.text.inverseBody, - }, -}); - -const variantToComponent: Record = { - display: 'span', - T32: 'span', - T28: 'span', - T22: 'span', - T18: 'span', - T14: 'span', - body: 'p', - label: 'span', - description: 'p', - code: 'pre', -}; - -const Typography: OverridableComponent = forwardRef( - function Typography(props, ref) { - const { - classes, - variant = 'body', - color = 'normal', - // @ts-expect-error not picked up as a prop from `OverridableComponent` - component, - ...other - } = props; - - return ( - - ); - } -); - -export default withStyles(styles, { name: 'MuiSpark_alpha_Typography' })( - Typography -) as typeof Typography; diff --git a/libs/spark/src/alpha/Typography/index.ts b/libs/spark/src/alpha/Typography/index.ts deleted file mode 100644 index ef97bea65..000000000 --- a/libs/spark/src/alpha/Typography/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Typography'; -export * from './Typography'; diff --git a/libs/spark/src/alpha/createSvgIcon/createSvgIcon.test.tsx b/libs/spark/src/alpha/createSvgIcon/createSvgIcon.test.tsx deleted file mode 100644 index 360875ffe..000000000 --- a/libs/spark/src/alpha/createSvgIcon/createSvgIcon.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { render } from '@testing-library/react'; -import createSvgIcon from './createSvgIcon'; - -describe('createSvgIcon', () => { - it('Can return without ThemeProvider', () => { - const Icon = createSvgIcon(, 'Dot'); - - expect(Icon).toBeTruthy(); - }); - - it('Can accept custom viewBox, width, height', () => { - const viewBox = '0 0 22 26'; - const width = '22'; - const height = '26'; - const Icon = createSvgIcon(, 'Dot', viewBox, width, height); - const { getByTestId } = render(); - - const component = getByTestId('DotIcon'); - expect(component.getAttribute('viewBox')).toBe(viewBox); - expect(component.getAttribute('width')).toBe(width); - expect(component.getAttribute('height')).toBe(height); - }); -}); diff --git a/libs/spark/src/alpha/createSvgIcon/createSvgIcon.tsx b/libs/spark/src/alpha/createSvgIcon/createSvgIcon.tsx deleted file mode 100644 index 4dd73d2c4..000000000 --- a/libs/spark/src/alpha/createSvgIcon/createSvgIcon.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import type { ReactNode } from 'react'; -import React, { forwardRef, memo } from 'react'; -import type { SvgIconProps } from '../SvgIcon'; -import SvgIcon from '../SvgIcon'; - -const createSvgIcon = ( - path: ReactNode, - displayName: string, - viewBox?: string, - width?: string, - height?: string -): typeof SvgIcon => { - const Component = ( - props: SvgIconProps, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ref: any - ) => ( - - {path} - - ); - - if (process.env.NODE_ENV !== 'production') { - // Need to set `displayName` on the inner component for `memo`. - // React prior to 16.14 ignores `displayName` on the wrapper. - Component.displayName = `${displayName}Icon`; - } - - Component.muiName = 'SvgIcon'; - - return memo(forwardRef(Component)) as typeof SvgIcon; -}; - -export default createSvgIcon; - -// Derived from https://github.com/mui-org/material-ui/blob/1c5beec4be20eae30e75c69ab513bbfec3e9baaf/packages/material-ui/src/utils/createSvgIcon.js diff --git a/libs/spark/src/alpha/createSvgIcon/index.ts b/libs/spark/src/alpha/createSvgIcon/index.ts deleted file mode 100644 index 9a9702dc4..000000000 --- a/libs/spark/src/alpha/createSvgIcon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './createSvgIcon'; diff --git a/libs/spark/src/alpha/index.ts b/libs/spark/src/alpha/index.ts deleted file mode 100644 index fbf2fd9a5..000000000 --- a/libs/spark/src/alpha/index.ts +++ /dev/null @@ -1,235 +0,0 @@ -export { default as Breadcrumbs } from './Breadcrumbs'; -export * from './Breadcrumbs'; - -export { default as Breadcrumb } from './Breadcrumb'; -export * from './Breadcrumb'; - -export { default as CircularProgress } from './CircularProgress'; -export * from './CircularProgress'; - -export { default as Drawer } from './Drawer'; -export * from './Drawer'; - -export { default as LinearProgress } from './LinearProgress'; -export * from './LinearProgress'; - -export { default as SideBarContext } from './SideBarContext'; -export * from './SideBarContext'; - -export { default as SideBarDrawer } from './SideBarDrawer'; -export * from './SideBarDrawer'; - -export { default as SideBarList } from './SideBarList'; -export * from './SideBarList'; - -export { default as SideBarListItem } from './SideBarListItem'; -export * from './SideBarListItem'; - -export { default as SideBarListSubheader } from './SideBarListSubheader'; -export * from './SideBarListSubheader'; - -export { default as SideBarProvider } from './SideBarProvider'; -export * from './SideBarProvider'; - -export { default as TopBar } from './TopBar'; -export * from './TopBar'; - -export { default as Autocomplete } from './Autocomplete'; -export * from './Autocomplete'; - -export { default as Avatar } from './Avatar'; -export * from './Avatar'; - -export { default as AvatarButton } from './AvatarButton'; -export * from './AvatarButton'; - -export { default as Banner } from './Banner'; -export * from './Banner'; - -export { default as Button } from './Button'; -export * from './Button'; - -export { default as Card } from './Card'; -export * from './Card'; - -export { default as Checkbox } from './Checkbox'; -export * from './Checkbox'; - -export { default as CheckboxField } from './CheckboxField'; -export * from './CheckboxField'; - -export { default as CheckboxListItem } from './CheckboxListItem'; -export * from './CheckboxListItem'; - -export { default as CheckboxMenuItem } from './CheckboxMenuItem'; -export * from './CheckboxMenuItem'; - -export { default as CheckboxGroupField } from './CheckboxGroupField'; -export * from './CheckboxGroupField'; - -export { default as ContentGroup } from './ContentGroup'; -export * from './ContentGroup'; - -export { default as CssBaseline } from './CssBaseline'; - -export { default as Divider } from './Divider'; -export * from './Divider'; - -export { default as Dropdown } from './Dropdown'; -export * from './Dropdown'; - -export type { DropdownContextValue } from './DropdownContext'; - -export { default as DropdownMenu } from './DropdownMenu'; -export * from './DropdownMenu'; - -export { default as DropdownTrigger } from './DropdownTrigger'; -export * from './DropdownTrigger'; - -export { default as FontFacesBaseline } from './FontFacesBaseline'; - -export { default as FormControl } from './FormControl'; -export * from './FormControl'; - -export { default as FormControlLabel } from './FormControlLabel'; -export * from './FormControlLabel'; - -export { default as FormGroup } from './FormGroup'; -export * from './FormGroup'; - -export { default as FormHelperText } from './FormHelperText'; -export * from './FormHelperText'; - -export { default as FormLabel } from './FormLabel'; -export * from './FormLabel'; - -export { default as IconButton } from './IconButton'; -export * from './IconButton'; - -export { default as Input } from './Input'; -export * from './Input'; - -export { default as InputAdornment } from './InputAdornment'; -export * from './InputAdornment'; - -export { default as Link } from './Link'; -export * from './Link'; - -export { default as List } from './List'; -export * from './List'; - -export { default as ListItem } from './ListItem'; -export * from './ListItem'; - -export { default as ListSubheader } from './ListSubheader'; -export * from './ListSubheader'; - -export { default as Menu } from './Menu'; -export * from './Menu'; - -export { default as MenuItem } from './MenuItem'; -export * from './MenuItem'; - -export { default as MenuList } from './MenuList'; -export * from './MenuList'; - -export { default as ModalDialog } from './ModalDialog'; -export * from './ModalDialog'; - -export { default as ModalDialogActions } from './ModalDialogActions'; -export * from './ModalDialogActions'; - -export { default as ModalDialogContent } from './ModalDialogContent'; -export * from './ModalDialogContent'; - -export { default as ModalDialogContentText } from './ModalDialogContentText'; -export * from './ModalDialogContentText'; - -export { default as ModalDialogTitle } from './ModalDialogTitle'; -export * from './ModalDialogTitle'; - -export { default as Paper } from './Paper'; -export * from './Paper'; - -export { default as Radio } from './Radio'; -export * from './Radio'; - -export { default as RadioField } from './RadioField'; -export * from './RadioField'; - -export { default as RadioGroup } from './RadioGroup'; -export * from './RadioGroup'; - -export type { RadioGroupExtraContextValue } from './RadioGroupExtraContext'; - -export { default as RadioGroupField } from './RadioGroupField'; -export * from './RadioGroupField'; - -export { default as SectionMessage } from './SectionMessage'; -export * from './SectionMessage'; - -export { default as Select } from './Select'; -export * from './Select'; - -export { default as SvgIcon } from './SvgIcon'; -export * from './SvgIcon'; - -export { default as Switch } from './Switch'; -export * from './Switch'; - -export { default as SwitchField } from './SwitchField'; -export * from './SwitchField'; - -export { default as Tab } from './Tab'; -export * from './Tab'; - -export { default as TabPanel } from './TabPanel'; -export * from './TabPanel'; - -export { default as Tabs } from './Tabs'; -export * from './Tabs'; - -export type { TabsContextValue } from './TabsContext'; - -export { default as TabsList } from './TabsList'; -export * from './TabsList'; - -export { default as Tag } from './Tag'; -export * from './Tag'; - -export { default as Toast } from './Toast'; -export * from './Toast'; - -export type { ToastsContextValue } from './ToastsContext'; - -export { default as ToastsProvider } from './ToastsProvider'; -export * from './ToastsProvider'; - -export { default as Tooltip } from './Tooltip'; -export * from './Tooltip'; - -export { default as TextField } from './TextField'; -export * from './TextField'; - -export { default as Typography } from './Typography'; -export * from './Typography'; - -export { default as createSvgIcon } from './createSvgIcon'; - -export { default as useAutocomplete } from './useAutocomplete'; - -export { default as useDropdown } from './useDropdown'; - -export { default as useMediaQuery } from './useMediaQuery'; - -export { default as useRadioGroupExtra } from './useRadioGroupExtra'; - -export { default as useSideBar } from './useSideBar'; - -export { default as useSideBarTrigger } from './useSideBarTrigger'; - -export { default as useTabs } from './useTabs'; - -export { default as useTheme } from './useTheme'; - -export { default as useToasts } from './useToasts'; diff --git a/libs/spark/src/alpha/internal/Alert.tsx b/libs/spark/src/alpha/internal/Alert.tsx deleted file mode 100644 index 7ed43edfb..000000000 --- a/libs/spark/src/alpha/internal/Alert.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import type { PaperProps } from '@material-ui/core/Paper'; -import Paper from '@material-ui/core/Paper'; -import clsx from 'clsx'; -import type { ReactNode, SyntheticEvent } from 'react'; -import React, { forwardRef } from 'react'; -import AlertTriangle from './AlertTriangle'; -import AlertOctagon from './AlertOctagon'; -import CheckCircle2 from './CheckCircle2'; -import Cross from './Cross'; -import Info from './Info'; -import type { IconButtonProps } from '../IconButton'; -import IconButton from '../IconButton'; -import type { StandardProps } from '../../utils'; -import withStyles from '../../withStyles'; - -export interface AlertProps - extends StandardProps, AlertClassKey, 'variant'> { - /** - * The action to display. It renders after the message, at the end of the component. - */ - action?: ReactNode; - /** - * Override the default label for the *close popup* icon button. - */ - closeText?: string; - /** - * The severity of the alert. This defines the color and icon used. - */ - severity?: 'info' | 'success' | 'warning' | 'error'; - /** - * Override the icon displayed before the children. (By default, the icon displayed is mapped to the value of the `severity` prop.) - */ - icon?: ReactNode | false; - /** - * The ARIA role attribute of the element. - */ - role?: string; - /** - * Callback fired when the component requests to be closed. - * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. - * - * @param {object} event The event source of the callback. - */ - onClose?: (event: SyntheticEvent) => void; - /** - * Props applied to the *close alert* icon button. - */ - CloseProps?: IconButtonProps; -} - -export type AlertClassKey = 'root' | 'icon' | 'message' | 'action'; - -const defaultIconMapping = { - success: , - warning: , - error: , - info: , -}; - -const UnstyledAlert = forwardRef(function Alert(props: AlertProps, ref) { - const { - action, - children, - classes, - className, - closeText = 'Close', - icon, - onClose, - role = 'alert', - severity = 'info', - CloseProps, - ...other - } = props; - - return ( - - {icon !== false ? ( -
    - {icon || defaultIconMapping[severity]} -
    - ) : null} - -
    {children}
    - - {action != null ? ( -
    {action}
    - ) : null} - - {action == null && onClose ? ( - - - - ) : null} -     - ); -}); - -const Alert = withStyles({ - root: {}, - icon: {}, - action: {}, - message: {}, -})(UnstyledAlert) as typeof UnstyledAlert; - -export default Alert; diff --git a/libs/spark/src/alpha/internal/AlertOctagon.tsx b/libs/spark/src/alpha/internal/AlertOctagon.tsx deleted file mode 100644 index 24401d86a..000000000 --- a/libs/spark/src/alpha/internal/AlertOctagon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../createSvgIcon'; - -export default createSvgIcon( - , - 'AlertOctagon' -); diff --git a/libs/spark/src/alpha/internal/AlertTriangle.tsx b/libs/spark/src/alpha/internal/AlertTriangle.tsx deleted file mode 100644 index 45309e63c..000000000 --- a/libs/spark/src/alpha/internal/AlertTriangle.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../createSvgIcon'; - -export default createSvgIcon( - , - 'AlertTriangle' -); diff --git a/libs/spark/src/alpha/internal/CheckCircle2.tsx b/libs/spark/src/alpha/internal/CheckCircle2.tsx deleted file mode 100644 index a7bfe1775..000000000 --- a/libs/spark/src/alpha/internal/CheckCircle2.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../createSvgIcon'; - -export default createSvgIcon( - , - 'CheckCircle2' -); diff --git a/libs/spark/src/alpha/internal/ChevronDown.tsx b/libs/spark/src/alpha/internal/ChevronDown.tsx deleted file mode 100644 index 5c40c1ff2..000000000 --- a/libs/spark/src/alpha/internal/ChevronDown.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../createSvgIcon'; - -export default createSvgIcon( - , - 'ChevronDown' -); diff --git a/libs/spark/src/alpha/internal/Cross.tsx b/libs/spark/src/alpha/internal/Cross.tsx deleted file mode 100644 index 0c7911293..000000000 --- a/libs/spark/src/alpha/internal/Cross.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../createSvgIcon'; - -export default createSvgIcon( - , - 'Cross' -); diff --git a/libs/spark/src/alpha/internal/CrossSmall.tsx b/libs/spark/src/alpha/internal/CrossSmall.tsx deleted file mode 100644 index 9a8fd0a5a..000000000 --- a/libs/spark/src/alpha/internal/CrossSmall.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../createSvgIcon'; - -export default createSvgIcon( - , - 'CrossSmall', - '0 0 16 16' -); diff --git a/libs/spark/src/alpha/internal/Filter.tsx b/libs/spark/src/alpha/internal/Filter.tsx deleted file mode 100644 index 3f063afa0..000000000 --- a/libs/spark/src/alpha/internal/Filter.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../createSvgIcon'; - -export default createSvgIcon( - , - 'Filter' -); diff --git a/libs/spark/src/alpha/internal/Info.tsx b/libs/spark/src/alpha/internal/Info.tsx deleted file mode 100644 index f4227a480..000000000 --- a/libs/spark/src/alpha/internal/Info.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../createSvgIcon'; - -export default createSvgIcon( - , - 'Info' -); diff --git a/libs/spark/src/alpha/theme/borders.stories.tsx b/libs/spark/src/alpha/theme/borders.stories.tsx deleted file mode 100644 index a8207b06e..000000000 --- a/libs/spark/src/alpha/theme/borders.stories.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react/types-6-0'; -import { styled, theme } from '../..'; - -export default { - title: '@ps/theme/borders', -} as Meta; - -const _Borders = styled(function Borders(props) { - return ( -
    -

    Borders

    - theme.borders_alpha -
    -
    -
    - none - borders.none -
    -
    -
    - -
    -
    -
    - transparent - borders.transparent -
    -
    - -
    -
    - subtle - borders.subtle -
    -
    - -
    -
    - standard - borders.standard -
    -
    - -
    -
    - bold - borders.bold -
    -
    - -
    -
    - selected - borders.selected -
    -
    -
    - -
    -
    -
    - active - borders.active -
    -
    - -
    -
    - expanded - borders.expanded -
    -
    - -
    -
    - hover - borders.hover -
    -
    - -
    -
    - focus - borders.focus -
    -
    -
    - -
    -
    -
    - error - borders.error -
    -
    - -
    -
    - info - borders.info -
    -
    - -
    -
    - success - borders.success -
    -
    - -
    -
    - warning - borders.warning -
    -
    -
    -
    - ); -})(({ theme }) => ({ - paddingLeft: 8, - '& .title': { - ...theme.typography_alpha.T22, - margin: 0, - }, - '& .content': { - display: 'flex', - gap: 40, - marginTop: 24, - }, - '& .square': { - alignItems: 'center', - backgroundColor: theme.palette_alpha.neutral[0], - borderRadius: theme.radii_alpha.sm, - display: 'flex', - flexDirection: 'column', - height: 200, - justifyContent: 'center', - width: 200, - }, - '& .name': { - ...theme.typography_alpha.label, - }, - '& .code': { - ...theme.typography_alpha.code, - }, -})); - -export const Borders: Story = () => <_Borders />; diff --git a/libs/spark/src/alpha/theme/borders.ts b/libs/spark/src/alpha/theme/borders.ts deleted file mode 100644 index 26692e834..000000000 --- a/libs/spark/src/alpha/theme/borders.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type * as CSS from 'csstype'; -import palette from './palette'; - -export interface Borders { - none: CSS.Property.Border; - // stylistic - transparent: CSS.Property.Border; - subtle: CSS.Property.Border; - standard: CSS.Property.Border; - bold: CSS.Property.Border; - selected: CSS.Property.Border; - // action - active: CSS.Property.Border; - expanded: CSS.Property.Border; - hover: CSS.Property.Border; - focus: CSS.Property.Border; - // severity - error: CSS.Property.Border; - info: CSS.Property.Border; - success: CSS.Property.Border; - warning: CSS.Property.Border; -} - -const borders: Borders = { - none: 'none', - transparent: '1px solid transparent', - subtle: `1px solid ${palette.neutral[70]}`, - standard: `1px solid ${palette.neutral[90]}`, - bold: `1px solid ${palette.neutral[100]}`, - selected: `1px solid ${palette.blue[600]}`, - active: `1px solid ${palette.blue[100]}`, - expanded: `1px solid ${palette.blue[600]}`, - hover: `1px solid ${palette.neutral[100]}`, - focus: `1px solid ${palette.blue[600]}`, - error: `1px solid ${palette.red[700]}`, - info: `1px solid ${palette.blue[600]}`, - success: `1px solid ${palette.green[600]}`, - warning: `1px solid ${palette.yellow[600]}`, -}; - -export default borders; diff --git a/libs/spark/src/alpha/theme/fontFaces.stories.tsx b/libs/spark/src/alpha/theme/fontFaces.stories.tsx deleted file mode 100644 index fef9294ab..000000000 --- a/libs/spark/src/alpha/theme/fontFaces.stories.tsx +++ /dev/null @@ -1,512 +0,0 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react/types-6-0'; -import { ScopedCssBaseline, styled, withStyles } from '../..'; -import { VariantUseFor } from './typography.stories'; - -export default { - title: '@ps/theme/fonts', -} as Meta; - -const FontsBaseline = withStyles({ - root: { - letterSpacing: 0, - '@global': { - '@font-face': [ - { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 100, - src: 'url(/internal/fonts/inter-thin.woff2) format("woff2")', - }, - { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 200, - src: 'url(/internal/fonts/inter-extralight.woff2) format("woff2")', - }, - { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 300, - src: 'url(/internal/fonts/inter-light.woff2) format("woff2")', - }, - { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 500, - src: 'url(/internal/fonts/inter-medium.woff2) format("woff2")', - }, - { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 600, - src: 'url(/internal/fonts/inter-semibold.woff2) format("woff2")', - }, - { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 700, - src: 'url(/internal/fonts/inter-bold.woff2) format("woff2")', - }, - { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 800, - src: 'url(/internal/fonts/inter-extrabold.woff2) format("woff2")', - }, - { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 900, - src: 'url(/internal/fonts/inter-black.woff2) format("woff2")', - }, - { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 100, - src: 'url(/internal/fonts/poppins-thin.woff2) format("woff2")', - }, - { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 200, - src: 'url(/internal/fonts/poppins-extralight.woff2) format("woff2")', - }, - { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 300, - src: 'url(/internal/fonts/poppins-light.woff2) format("woff2")', - }, - { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 400, - src: 'url(/internal/fonts/poppins-regular.woff2) format("woff2")', - }, - { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 500, - src: 'url(/internal/fonts/poppins-medium.woff2) format("woff2")', - }, - { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 900, - src: 'url(/internal/fonts/poppins-black.woff2) format("woff2")', - }, - { - fontFamily: '"Roboto Mono"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 100, - src: 'url(/internal/fonts/robotomono-thin.woff2) format("woff2")', - }, - { - fontFamily: '"Roboto Mono"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 300, - src: 'url(/internal/fonts/robotomono-light.woff2) format("woff2")', - }, - { - fontFamily: '"Roboto Mono"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 400, - src: 'url(/internal/fonts/robotomono-regular.woff2) format("woff2")', - }, - { - fontFamily: '"Roboto Mono"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 500, - src: 'url(/internal/fonts/robotomono-medium.woff2) format("woff2")', - }, - { - fontFamily: '"Roboto Mono"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 700, - src: 'url(/internal/fonts/robotomono-bold.woff2) format("woff2")', - }, - ], - }, - }, -})(ScopedCssBaseline); - -const Root = styled('div')({ - paddingLeft: 8, -}); -const Heading = styled('h1')(({ theme }) => ({ - fontFamily: '"Poppins"', - fontSize: theme.typography_alpha.pxToRem(32), - fontWeight: 500, - letterSpacing: '-0.04em', - lineHeight: 48 / 32, -})); -const Description = styled('p')(({ theme }) => ({ - margin: 0, // reset - marginBottom: 16, - fontFamily: '"Inter"', - fontSize: theme.typography_alpha.pxToRem(18), - lineHeight: 28 / 18, -})); -const Code = styled('span')(({ theme }) => ({ - margin: 0, // reset - display: 'inline', - backgroundColor: '#f4f5f7', - color: theme.palette_alpha.neutral[500], - paddingRight: 4, - paddingLeft: 4, - ...theme.typography_alpha.code, -})); - -export const Guide: Story = () => ( - // @ts-expect-error ts(2769) - - - Fonts guide - - The Prenda Design System (PDS) describes three fonts for web - applications: "Poppins", "Inter", and "Roboto Mono". The web components - rely on various font weights and styles being available on the client. - To achieve this, the complete set of @font-face rules - required are injected into the document's styles using the{' '} - CssBaseline as a child of the ThemeProvider{' '} - component with PDS's theme. This steps are encapsulated for - you if you simply wrap your app in SparkThemeProvider. - - - These fonts are available through{' '} - - Google Fonts - - , but self-hosting is preferable for performance, reliability, and - tracking concerns. All of the fonts are "open source", and usually - reside within a GitHub repository. Google fonts can be found under - Google's{' '} - - "fonts" repository - - . Typically the repository forks the work of the original font - repositories. We trace back to the original:{' '} - - Inter - {' '} - (not a Google font),{' '} - - Poppins - - ,{' '} - - Roboto Mono - {' '} - (PDS v1:{' '} - - Source Code Pro - - ,{' '} - - Nunito - - ). From these repositories, we are looking for "original" font files, - i.e. with extensions .ttf or .otf (preferred). - Then, we upload those files to{' '} - - Font Squirrel's "Webfont Generator" - {' '} - and convert using the recommended, "optimal" settings. The aim is to - convert "original" font files to ones optimized for serving on the web, - i.e. with extension .woff and .woff2. - Sometimes, these files can be found in source repositories themselves, - or distributed by some vendor, but they can be up to 100kb or 200kb in - size. The generator consistently produces files that are less than 40kb - in size, ideal for self-hosting and optimal client-download performance. - - - As a consumer of PDS, you should serve the contents of the{' '} - libs/spark/public/ directory in your app, minus the{' '} - internal/ directory, and any files / directories that are - undesirable (e.g. "nunito" files if you are consuming PDS v2 - implementations). - - - You can also found complete source "zips" and "converted" files under - the top level assets/ directory of the repository. These - are useful if your designs fall outside of the PDS specifications, and - you need to load additional font face declarations and associated files. - - - Note: most font files updated to Font Squirrel's "Webfont - Generator" were converted using the "Optimal" settings. However, the - files for "Roboto Mono" were converted using "Expert" settings, with - "Truetype Hinting" set to "Keep Existing" and "Vertical Metrics" set to - "No Adjustment" (the remaining settings were kept as default). This - change was meant to fix appearance issue with certain letters like "e", - "r", "n", etc. that would appear to have a lower baseline if the files - were generated with "Optimal" settings. - - - -); - -const Showcase = styled('div')({ - display: 'grid', - gridTemplateColumns: 'auto 446px', - gridGap: 64, -}); -const Hr = styled('hr')(({ theme }) => ({ - background: theme.palette_alpha.neutral[600], - marginTop: 24, - marginBottom: 48, - opacity: 0.32, -})); - -const LargeDisplay = styled(({ fontFamily, fontWeight, ...other }) => ( - // eslint-disable-next-line jsx-a11y/heading-has-content -

    -))( - // @ts-expect-error ts(2339) - ({ fontFamily = '"Poppins"', fontWeight = 700, theme }) => ({ - color: theme.palette_alpha.neutral[600], - fontFamily, - fontSize: theme.typography_alpha.pxToRem(64), - fontWeight, - lineHeight: 72 / 64, - margin: 0, // reset - }) -); -const Body = styled('p')(({ theme }) => ({ - marginTop: 16, - marginBottom: 32, - ...theme.typography_alpha.body, -})); -const WeightWaterfall = styled(({ fontFamily, ...other }) => ( -
    -))( - // @ts-expect-error ts(2339) - ({ theme, fontFamily }) => ({ - display: 'flex', - flexDirection: 'column', - gap: 32, - '& > *': { - fontFamily, - fontSize: theme.typography_alpha.pxToRem(48), - letterSpacing: '-0.02em', - lineHeight: 40 / 48, - // inline `fontWeight` - }, - }) -); - -export const Poppins: Story = () => ( - // @ts-expect-error ts(2769) - - - Brand font - - Marketing, Learning and development, and Product all will use Poppins - throughout their experiences to create a unified brand. - -
    - -
    - Poppins - - Geometric sans serif typefaces have been a popular design tool ever - since these actors took to the world’s stage. Poppins is one of the - new comers to this long tradition. With support for the Devanagari - and Latin writing systems, it is an internationalist take on the - genre. -
    -
    - Many of the Latin glyphs (such as the ampersand) are more - constructed and rationalist than is typical. The Devanagari design - is particularly new, and is the first ever Devanagari typeface with - a range of weights in this genre. Just like the Latin, the - Devanagari is based on pure geometry, particularly circles. -
    -
    - Each letterform is nearly monolinear, with optical corrections - applied to stroke joints where necessary to maintain an even - typographic color. The Devanagari base character height and the - Latin ascender height are equal; Latin capital letters are shorter - than the Devanagari characters, and the Latin x-height is set rather - high. - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - - Headings, display text, marketing site, marketing materials, - section groupings. - - -
    - - {[100, 200, 300, 400, 500, 600, 700, 800, 900].map((fontWeight) => ( - - AaBbCcDd 123 &!? - - ))} - -     -     -     -); -Poppins.storyName = '"Poppins"'; - -export const Inter: Story = () => ( - // @ts-expect-error ts(2769) - - - Functional product font - - For functional text inside products we use Inter. Inter was designed - specifically for UI - this ensures that we have a highly legible and - optimized interfaces. Ensuring that guides, admins, and parents can get - their tasks accomplished with ease and efficiency. - -
    - -
    - Inter - - Inter features a tall x-height to aid in readability of mixed-case - and lower-case text. Several OpenType features are provided as well, - like contextual alternates that adjusts punctuation depending on the - shape of surrounding glyphs, slashed zero for when you need to - disambiguate "0" from "o", tabular numbers, etc. -
    -
    - There are nine weights, each with italic counterparts, making a - total of 18 styles. -
    -
    - Inter comes with many OpenType features that can be used to tailor - functionality and aesthetics to your specific needs. Some of these - features can be combined to form a great number of alternative - variations. -
    -
    - - For more information - - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - - Paragraph or body copy, small descriptions, components inside a - product experience such as buttons, messages, input fields, - checkboxes, etc. - - -
    - - {[100, 200, 300, 400, 500, 600, 700, 800, 900].map((fontWeight) => ( - - AaBbCcDd 123 &!? - - ))} - -     -     -     -); -Inter.storyName = '"Inter"'; - -export const RobotoMono: Story = () => ( - // @ts-expect-error ts(2769) - - - Monospaced font - - Roboto Mono is provided as a pairing to Inter, Poppins, and KG neatly - printed to be used in a monospace environment like a code editor. - -
    - -
    - - Roboto Mono - - - Roboto Mono is a monospaced addition to the Roboto type family. Like - the other members of the Roboto family, the fonts are optimized for - readability on screens across a wide variety of devices and reading - environments. While the monospaced version is related to its - variable width cousin, it doesn’t hesitate to change forms to better - fit the constraints of a monospaced environment. For example, narrow - glyphs like ‘I’, ‘l’ and ‘i’ have added serifs for more even texture - while wider glyphs are adjusted for weight. Curved caps like ‘C’ and - ‘O’ take on the straighter sides from Roboto Condensed. -
    -
    - Special consideration is given to glyphs important for reading and - writing software source code. Letters with similar shapes are easy - to tell apart. Digit ‘1’, lowercase ‘l’ and capital ‘I’ are easily - differentiated as are zero and the letter ‘O’. Punctuation important - for code has also been considered. For example, the curly braces ‘ - {'{ }'}’ have exaggerated points to clearly differentiate them from - parenthesis ‘( )’ and braces ‘[ ]’. Periods and commas are also - exaggerated to identify them more quickly. The scale and weight of - symbols commonly used as operators have also been optimized. - -
    - - {[100, 300, 400, 500, 700].map((fontWeight) => ( - - AaBbCcDd 123 &!? - - ))} - -     -     -     -); -RobotoMono.storyName = '"Roboto Mono"'; diff --git a/libs/spark/src/alpha/theme/fontFaces.ts b/libs/spark/src/alpha/theme/fontFaces.ts deleted file mode 100644 index 86dec7592..000000000 --- a/libs/spark/src/alpha/theme/fontFaces.ts +++ /dev/null @@ -1,176 +0,0 @@ -import type * as CSS from 'csstype'; - -/** - * A small, internal utility to generate a standard `src` property value for `@font-face` declarations. - * - * MAINTAINER NOTE: Whenever an expected asset file changes (in this case a font file), the version number must be incremented. Otherwise, browsers may use the previously cached file for a long time. - */ -const buildSrc = (filename: string) => - `url(/pds-assets-v1/fonts/${filename}.woff2) format("woff2")`; - -const poppinsExtrabold: CSS.AtRule.FontFace = { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 800, - src: buildSrc('poppins-extrabold'), -}; - -const poppinsExtraboldItalic: CSS.AtRule.FontFace = { - fontFamily: '"Poppins"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 800, - src: buildSrc('poppins-extrabolditalic'), -}; - -const poppinsBold: CSS.AtRule.FontFace = { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 700, - src: buildSrc('poppins-bold'), -}; - -const poppinsBoldItalic: CSS.AtRule.FontFace = { - fontFamily: '"Poppins"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 700, - src: buildSrc('poppins-bolditalic'), -}; - -const poppinsSemibold: CSS.AtRule.FontFace = { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 600, - src: buildSrc('poppins-semibold'), -}; - -const poppinsSemiboldItalic: CSS.AtRule.FontFace = { - fontFamily: '"Poppins"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 600, - src: buildSrc('poppins-semibolditalic'), -}; - -const poppinsMedium: CSS.AtRule.FontFace = { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 500, - src: buildSrc('poppins-medium'), -}; - -const poppinsMediumItalic: CSS.AtRule.FontFace = { - fontFamily: '"Poppins"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 500, - src: buildSrc('poppins-mediumitalic'), -}; - -const interRegular: CSS.AtRule.FontFace = { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 400, - src: buildSrc('inter-regular'), -}; - -const interItalic: CSS.AtRule.FontFace = { - fontFamily: '"Inter"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 400, - src: buildSrc('inter-italic'), -}; - -const interMedium: CSS.AtRule.FontFace = { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 500, - src: buildSrc('inter-medium'), -}; - -const interMediumItalic: CSS.AtRule.FontFace = { - fontFamily: '"Inter"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 500, - src: buildSrc('inter-mediumitalic'), -}; - -const interSemibold: CSS.AtRule.FontFace = { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 600, - src: buildSrc('inter-semibold'), -}; - -const interSemiboldItalic: CSS.AtRule.FontFace = { - fontFamily: '"Inter"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 600, - src: buildSrc('inter-semibolditalic'), -}; - -const interBold: CSS.AtRule.FontFace = { - fontFamily: '"Inter"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 700, - src: buildSrc('inter-bold'), -}; - -const interBoldItalic: CSS.AtRule.FontFace = { - fontFamily: '"Inter"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 700, - src: buildSrc('inter-bolditalic'), -}; - -const robotoMonoRegular: CSS.AtRule.FontFace = { - fontFamily: '"Roboto Mono"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 400, - src: buildSrc('robotomono-regular'), -}; - -const robotoMonoItalic: CSS.AtRule.FontFace = { - fontFamily: '"Roboto Mono"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 400, - src: buildSrc('robotomono-italic'), -}; - -const fontFaces: Array = [ - poppinsExtrabold, - poppinsExtraboldItalic, - poppinsBold, - poppinsBoldItalic, - poppinsSemibold, - poppinsSemiboldItalic, - poppinsMedium, - poppinsMediumItalic, - interRegular, - interItalic, - interMedium, - interMediumItalic, - interSemibold, - interSemiboldItalic, - interBold, - interBoldItalic, - robotoMonoRegular, - robotoMonoItalic, -]; - -export default fontFaces; diff --git a/libs/spark/src/alpha/theme/palette.stories.tsx b/libs/spark/src/alpha/theme/palette.stories.tsx deleted file mode 100644 index d5f07af5b..000000000 --- a/libs/spark/src/alpha/theme/palette.stories.tsx +++ /dev/null @@ -1,478 +0,0 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react/types-6-0'; -import type { Theme } from '../..'; -import { styled, theme } from '../..'; - -export default { - title: '@ps/theme/palette', -} as Meta; - -/** - * Get theme value of given chain.case field. - * @example - * getValue(theme, 'brand.blue'); // returns '#0a4872' - * getValue(theme, 'tones.warm.400'); // returns '#733f2a' - */ -function getValue(theme: Theme, field: string): string { - const fields = field.split('.'); - - let walk = theme.palette_alpha; - let value; - for (let i = 0; i < fields.length; i++) { - if (i === fields.length - 1) { - value = walk[fields[i]]; - } else { - walk = walk[fields[i]]; - } - } - - return value; -} - -/** - * @example - * getDisplayField('neutral.600'); // returns 'neutral[600]' - * getDisplayField('tones.warm.400'); // returns 'tones.warm[400]' - */ -function getDisplayField(field: string): string { - const fields = field.split('.'); - - const prefix = fields.slice(0, -1).join('.'); - let suffix = fields.slice(-1)[0]; - // @ts-expect-error ts(2345) what a silly typing - suffix = !isNaN(suffix) ? `[${suffix}]` : `.${suffix}`; - - return prefix.concat(suffix); -} - -const PaletteColor = styled(function PaletteColor(props: { - name: string; - field: string; -}) { - const { name, field, ...other } = props; - - return ( -
    -
    -
    {name}
    -
    {getValue(theme, field)}
    -
    palette.{getDisplayField(field)}
    -
    - ); -})( - // @ts-expect-error ts(2339) - ({ theme, field }) => ({ - '& .color': { - backgroundColor: getValue(theme, field), - borderRadius: theme.radii_alpha.lg, - height: 104, - width: 177, - marginBottom: 16, - }, - '& .name': { - // fontFamily: 'Inter', - fontSize: theme.typography.pxToRem(16), - lineHeight: 20 / 16, - fontWeight: 600, - color: theme.palette_alpha.text.body, - marginBottom: 8, - }, - '& .value': { - // fontFamily: 'Inter', - fontSize: theme.typography.pxToRem(14), - lineHeight: 20 / 14, - fontWeight: 400, - color: theme.palette_alpha.text.subdued, - }, - '& .field': { - // fontFamily: 'Inter', - fontSize: theme.typography.pxToRem(14), - lineHeight: 20 / 14, - fontWeight: 400, - color: theme.palette_alpha.text.subdued, - }, - }) -); - -const PaletteSwatch = styled(function PaletteSwatch(props: { - colors: Array<{ - name: string; - field: string; - }>; -}) { - const { colors, ...other } = props; - - return ( -
    - {colors.map((color) => ( - - ))} -
    - ); -})({ - display: 'flex', - flexWrap: 'wrap', - gap: 24, -}); - -const Root = styled('div')({ - paddingLeft: 8, -}); -// :unstable_: replace with unstable_Typography -const H1 = styled('h1')(({ theme }) => ({ - // fontFamily: 'Inter', - fontSize: theme.typography.pxToRem(28), - lineHeight: 40 / 28, - fontWeight: 600, - color: theme.palette_alpha.text.heading, - marginBottom: 8, -})); -const H2 = styled('h2')(({ theme }) => ({ - // fontFamily: 'Inter', - fontSize: theme.typography.pxToRem(24), - lineHeight: 32 / 24, - fontWeight: 600, - color: theme.palette_alpha.text.heading, - marginBottom: 8, - marginTop: 8, -})); -const H3 = styled('h3')(({ theme }) => ({ - // fontFamily: 'Inter', - fontSize: theme.typography.pxToRem(20), - lineHeight: 32 / 24, - fontWeight: 600, - color: theme.palette_alpha.text.heading, - marginBottom: 8, - marginTop: 8, -})); -const Body = styled('p')(({ theme }) => ({ - // fontFamily: 'Inter', - fontSize: theme.typography.pxToRem(16), - lineHeight: 24 / 16, - fontWeight: 400, - color: theme.palette_alpha.text.body, - marginBottom: 16, -})); -const Spacer = styled('div')({ - height: 48, -}); -const SmallSpacer = styled('div')({ - height: 32, -}); - -export const Primary: Story = () => ( - -

    Primary palette

    - - Color distinguishes our brand and helps us create consistent experiences - across product. - -

    Prenda Brand

    - Core brand palette that represents Prenda. - - -

    Functional palette

    - - We use Prenda Blue for primary actions and for buttons indicating progress - and representing authentication. Neutral (N600) is used primarily for body - text and headings, and white (N0) is used for backgrounds. - - - -

    Background

    - - experimental - - - -

    Text

    - - experimental - - - -

    Inverse Text

    - - experimental - - -     -); - -export const Extended: Story = () => ( - -

    Primary palette

    - - The extended palette consists of all the useable tints and shades of each - color in the palette. They are all numbered for easy reference. Usage of - these colors varies depending on the touch point, but they come in handy - for illustrations and components in product. - -

    Neutrals

    - - Neutrals have varying degrees of saturation that allow for the appropriate - level of warmth across marketing and product. Typically they are used for - text and subtle backgrounds when we don't want to draw too much attention - to a particular touchpoint or convey information such as "to do" or - "disabled". - -

    Dark Neutrals

    - - Dark neutrals are very effective for creating contrast and are therefore - the primary color used for typography. Occasionally the dark neutrals are - found in illustration but they rarely dominate the palette. Some - exceptions are dark mode UI elements and illustrations. - - - -

    Light Neutrals

    - - We use light neutrals as subtle backgrounds to indicate various - interactive states such as hover and disabled, or simply to create - secondary attention towards a component. You'll find light neutrals in - buttons, text fields, tags, and illustrations. Light neutrals are helpful - for offsetting content in a primarily white layout without losing warmth - and cleanliness and are therefore often used as a background color. Their - subtlety allows for them to be helpful in creating subtle shadows or - depth. - - - -

    Red - Error

    - - Red is mainly used for backgrounds in messages and in error states to draw - attention to important information or actions that are destructive or - block workflow. You'll find red used in components such as lozenges, - banner, flag messages, buttons, illustrations, and typography. - - - -

    Yellow - Warning

    - - Typically used for warning. Yellow feels right at home in components like - lozenges, banners, flag messages, and illustrations. Can also be used to - signal success in icons and animations. - - - -

    Green - Success

    - - We use green to indicate success or to celebrate a win. Green goes well - with lozenges, badges, toggles, messages, and illustrations. - - - -

    Blue - Progress

    - - Blue is used to indicate authentication, connectivity, or progress. You'll - find blue in messages, buttons, navigation, lozenges, badges, tabs, and - the progress tracker. - - - -

    Teal - Exploration

    - - Teal can typically be found in illustrations or as an accent color for - components such a tags. - - - -

    Purple - Learning

    - - Purple indicates help and support and is used as an accent color in - illustration and icons. - - - -

    Magenta - Start with Heart

    - - Magenta can typically be found in illustrations or as an accent color for - components such a tags. - - -     -); - -export const Tones: Story = () => ( - -

    Warm Skin Tones

    - - -

    Neutral Skin Tones

    - - -

    Cool Skin Tones

    - -     -); diff --git a/libs/spark/src/alpha/theme/palette.ts b/libs/spark/src/alpha/theme/palette.ts deleted file mode 100644 index 30ba2a40e..000000000 --- a/libs/spark/src/alpha/theme/palette.ts +++ /dev/null @@ -1,253 +0,0 @@ -import type * as CSS from 'csstype'; - -// Global tokens -// see https://spectrum.adobe.com/page/design-tokens/#Global-tokens -const globalTokens: Pick< - Palette, - | 'brand' - | 'red' - | 'yellow' - | 'green' - | 'blue' - | 'purple' - | 'teal' - | 'magenta' - | 'neutral' - | 'tones' -> = { - brand: { - blue: '#0a4872', - lightBlue: '#d7f3ff', - orange: '#f34700', - lightOrange: '#ffb78f', - }, - red: { - 100: '#ffebe6', - 200: '#ffbdad', - 300: '#ff8f73', - 400: '#ff7452', - 500: '#f34700', - 600: '#de350b', - 700: '#a72100', - }, - yellow: { - 100: '#fffae6', - 200: '#fff0b3', - 300: '#ffe380', - 400: '#ffc400', - 500: '#ffab00', - 600: '#ff991f', - 700: '#ff8b00', - }, - green: { - 100: '#e3fcef', - 200: '#abf5d1', - 300: '#79f2c0', - 400: '#57d9a3', - 500: '#36b37e', - 600: '#00875a', - 700: '#006644', - }, - blue: { - 100: '#deebff', - 200: '#b3d4ff', - 300: '#4c9aff', - 400: '#2684ff', - 500: '#0065ff', - 600: '#0052cc', - 700: '#0747a6', - }, - teal: { - 100: '#e6fcff', - 200: '#b3f5ff', - 300: '#79e2f2', - 400: '#00c7e6', - 500: '#00b8d9', - 600: '#00a3bf', - 700: '#008da6', - }, - purple: { - 100: '#eae6ff', - 200: '#c0b6f2', - 300: '#998dd9', - 400: '#8777d9', - 500: '#6554c0', - 600: '#5243aa', - 700: '#403294', - }, - magenta: { - 100: '#fff1f4', - 200: '#f7d2da', - 300: '#f399af', - 400: '#ea7793', - 500: '#de5173', - 600: '#d0355b', - 700: '#b2103a', - }, - neutral: { - 0: '#ffffff', - 60: '#fafbfc', - 70: '#ebecf0', - 80: '#dfe1e6', - 90: '#c1c7d0', - 100: '#6b778c', - 200: '#5e6c84', - 300: '#505f79', - 400: '#42526e', - 500: '#253858', - 600: '#091e42', - }, - tones: { - warm: { - 100: '#efc088', - 200: '#efc088', - 300: '#b06a49', - 400: '#7e3f2a', - 500: '#58280c', - }, - neutral: { - 100: '#fde6ca', - 200: '#dbbc96', - 300: '#ad7951', - 400: '#623a19', - 500: '#301e12', - }, - cool: { - 100: '#ecd4ca', - 200: '#c19a8c', - 300: '#8a605c', - 400: '#6d5049', - 500: '#402225', - }, - }, -}; - -// Alias tokens, composed of global tokens -// see https://spectrum.adobe.com/page/design-tokens/#Alias-tokens -const aliasTokens: Pick = { - background: { - default: globalTokens.neutral[0], - alternative: globalTokens.neutral[60], - brand: globalTokens.brand.blue, - inverse: globalTokens.neutral[600], - overlay: `${globalTokens.neutral[600]}cc`, - }, - text: { - heading: globalTokens.neutral[600], - body: globalTokens.neutral[500], - subdued: globalTokens.neutral[400], - disabled: globalTokens.neutral[100], - icon: globalTokens.neutral[500], - secondaryIcon: globalTokens.neutral[300], - inverseHeading: globalTokens.neutral[0], - inverseBody: globalTokens.neutral[60], - inverseSubdued: globalTokens.neutral[70], - inverseDisabled: globalTokens.neutral[90], - inverseIcon: globalTokens.neutral[60], - inverseSecondaryIcon: globalTokens.neutral[80], - }, - action: { - focusBoxShadow: `0 0 2px 4px ${globalTokens.teal[300]}`, - }, -}; - -const palette = { - ...globalTokens, - ...aliasTokens, -}; - -export default palette; - -// *************** -// *** TYPES *** -// *************** - -// Global token types -export interface Color { - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; -} - -export interface PaletteBrand { - blue: string; - lightBlue: string; - orange: string; - lightOrange: string; -} - -export interface PaletteNeutral { - 0: string; - 60: string; - 70: string; - 80: string; - 90: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; -} - -type Tone = { - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; -}; - -export interface PaletteTones { - warm: Tone; - neutral: Tone; - cool: Tone; -} - -// Alias token types -export interface PaletteBackground { - default: string; - alternative: string; - brand: string; - inverse: string; - overlay: string; -} - -export interface PaletteText { - heading: string; - body: string; - subdued: string; - disabled: string; - icon: string; - secondaryIcon: string; - inverseHeading: string; - inverseBody: string; - inverseSubdued: string; - inverseDisabled: string; - inverseIcon: string; - inverseSecondaryIcon: string; -} - -export interface PaletteAction { - focusBoxShadow: CSS.Property.BoxShadow; -} - -export interface Palette { - brand: PaletteBrand; - red: Color; - yellow: Color; - green: Color; - blue: Color; - teal: Color; - purple: Color; - magenta: Color; - neutral: PaletteNeutral; - tones: PaletteTones; - background: PaletteBackground; - text: PaletteText; - action: PaletteAction; -} diff --git a/libs/spark/src/alpha/theme/radii.stories.tsx b/libs/spark/src/alpha/theme/radii.stories.tsx deleted file mode 100644 index e21350588..000000000 --- a/libs/spark/src/alpha/theme/radii.stories.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react/types-6-0'; -import { styled, theme } from '../..'; - -export default { - title: '@ps/theme/radius', -} as Meta; - -const _Radii = styled(function Radii(props) { - return ( -
    -

    Radii

    - theme.radii_alpha -
    -
    -
    - zero - radii.zero (0px) -
    -
    -
    -
    - xs - radii.xs (2px) -
    -
    -
    -
    - sm - radii.sm (4px) -
    -
    -
    -
    - md - radii.md (8px) -
    -
    -
    -
    - lg - radii.lg (16px) -
    -
    -
    -
    - xl - radii.xl (32px) -
    -
    -
    -
    - full - radii.full - (9999px) -
    -
    -
    -
    - ); -})(({ theme }) => ({ - paddingLeft: 8, - '& .title': { - ...theme.typography_alpha.T22, - margin: 0, - }, - '& .content': { - display: 'flex', - gap: 40, - marginTop: 24, - }, - '& .square': { - alignItems: 'center', - backgroundColor: theme.palette_alpha.neutral[0], - border: theme.borders_alpha.standard, - display: 'flex', - flexDirection: 'column', - height: 160, - justifyContent: 'center', - width: 160, - }, - '& .name': { - ...theme.typography_alpha.label, - }, - '& .code': { - ...theme.typography_alpha.code, - }, -})); - -export const Radii: Story = () => <_Radii />; diff --git a/libs/spark/src/alpha/theme/radii.ts b/libs/spark/src/alpha/theme/radii.ts deleted file mode 100644 index 567f71174..000000000 --- a/libs/spark/src/alpha/theme/radii.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type * as CSS from 'csstype'; - -export interface Radii { - zero: CSS.Property.BorderRadius; - xs: CSS.Property.BorderRadius; - sm: CSS.Property.BorderRadius; - md: CSS.Property.BorderRadius; - lg: CSS.Property.BorderRadius; - xl: CSS.Property.BorderRadius; - full: CSS.Property.BorderRadius; -} - -const radii: Radii = { - zero: 0, - xs: '2px', - sm: '4px', - md: '8px', - lg: '16px', - xl: '32px', - full: '9999px', -}; - -export default radii; diff --git a/libs/spark/src/alpha/theme/shadows.stories.tsx b/libs/spark/src/alpha/theme/shadows.stories.tsx deleted file mode 100644 index 758da9215..000000000 --- a/libs/spark/src/alpha/theme/shadows.stories.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react/types-6-0'; -import { styled, theme } from '../..'; - -export default { - title: '@ps/theme/shadow', -} as Meta; - -const _Shadows = styled(function Shadows(props) { - return ( -
    -

    Shadows

    - theme.shadows_alpha -
    -
    -
    - none - shadows.none -
    -
    - -
    -
    - focus - shadows.focus -
    -
    -
    - -
    -
    -
    - error - shadows.error -
    -
    - -
    -
    - info - shadows.info -
    -
    - -
    -
    - success - shadows.success -
    -
    - -
    -
    - warning - shadows.warning -
    -
    -
    - -
    -
    -
    - E100 - shadows.E100 -
    -
    - -
    -
    - E200 - shadows.E200 -
    -
    - -
    -
    - E300 - shadows.E300 -
    -
    - -
    -
    - E400 - shadows.E400 -
    -
    - -
    -
    - E500 - shadows.E500 -
    -
    -
    -
    - ); -})(({ theme }) => ({ - paddingLeft: 8, - '& .title': { - ...theme.typography_alpha.T22, - margin: 0, - }, - '& .content': { - display: 'flex', - gap: 40, - marginTop: 24, - }, - '& .square': { - alignItems: 'center', - backgroundColor: theme.palette_alpha.neutral[0], - borderRadius: theme.radii_alpha.sm, - display: 'flex', - flexDirection: 'column', - height: 200, - justifyContent: 'center', - width: 200, - }, - '& .name': { - ...theme.typography_alpha.label, - }, - '& .code': { - ...theme.typography_alpha.code, - }, -})); - -export const Shadows: Story = () => <_Shadows />; diff --git a/libs/spark/src/alpha/theme/shadows.ts b/libs/spark/src/alpha/theme/shadows.ts deleted file mode 100644 index 3af7e2925..000000000 --- a/libs/spark/src/alpha/theme/shadows.ts +++ /dev/null @@ -1,35 +0,0 @@ -import type * as CSS from 'csstype'; -import palette from './palette'; - -export interface Shadows { - none: CSS.Property.BoxShadow; - E100: CSS.Property.BoxShadow; - E200: CSS.Property.BoxShadow; - E300: CSS.Property.BoxShadow; - E400: CSS.Property.BoxShadow; - E500: CSS.Property.BoxShadow; - error: CSS.Property.BoxShadow; - focus: CSS.Property.BoxShadow; - info: CSS.Property.BoxShadow; - success: CSS.Property.BoxShadow; - warning: CSS.Property.BoxShadow; -} - -const shadows: Shadows = { - none: 'none', - // stylistic (elevations) - E100: `0px 1px 1px 0px ${palette.neutral[600]}29`, - E200: `0px 3px 5px 0px ${palette.neutral[600]}29`, - E300: `0px 8px 12px 0px ${palette.neutral[600]}29`, - E400: `0px 10px 18px 0px ${palette.neutral[600]}29`, - E500: `0px 18px 28px 0px ${palette.neutral[600]}29`, - // action - focus: `0 0 2px 4px ${palette.teal[300]}`, - // severity - error: `0 0 0 4px ${palette.red[100]}`, - info: `0 0 0 4px ${palette.blue[100]}`, - success: `0 0 0 4px ${palette.green[100]}`, - warning: `0 0 0 4px ${palette.yellow[100]}`, -}; - -export default shadows; diff --git a/libs/spark/src/alpha/theme/typography.stories.tsx b/libs/spark/src/alpha/theme/typography.stories.tsx deleted file mode 100644 index f38d9e910..000000000 --- a/libs/spark/src/alpha/theme/typography.stories.tsx +++ /dev/null @@ -1,328 +0,0 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react/types-6-0'; -import { ScopedCssBaseline, styled, withStyles } from '../..'; - -export default { - title: '@ps/theme/typography', - excludeStories: ['VariantUseFor'], -} as Meta; - -const FontsBaseline = withStyles({ - root: { - letterSpacing: 0, - '@global': { - '@font-face': [ - { - fontFamily: '"Poppins"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 900, - src: 'url(/internal/fonts/poppins-black.woff2) format("woff2")', - }, - { - fontFamily: '"Roboto Mono"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 400, - src: 'url(/internal/fonts/robotomono-regular.woff2) format("woff2")', - }, - { - fontFamily: '"Roboto Mono"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 700, - src: 'url(/internal/fonts/robotomono-bold.woff2) format("woff2")', - }, - ], - }, - }, -})(ScopedCssBaseline); - -const VariantInfo = styled('div')(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - '& > :nth-child(1)': { - fontFamily: '"Poppins"', - fontWeight: 900, - fontSize: theme.typography_alpha.pxToRem(20), - lineHeight: 32 / 20, - }, - '& > :nth-child(2)': { - ...theme.typography_alpha.code, - }, -})); - -const FlexBox = styled('div')({ - display: 'flex', - flexDirection: 'column', - gap: 16, -}); - -const VariantSwagger = styled(({ variant, ...other }) =>
    )( - // @ts-expect-error ts(2339) - ({ theme, variant }) => ({ - ...theme.typography_alpha[variant], - color: theme.palette_alpha.neutral[500], - }) -); -export const VariantUseFor = styled('span')(({ theme }) => ({ - backgroundColor: '#f4f5f7', - display: 'flex', - flexDirection: 'column', - gap: 8, - padding: 8, - color: theme.palette_alpha.neutral[500], - ...theme.typography_alpha.code, - '& > :nth-child(1)': { - fontWeight: 700, - }, -})); - -const Root = styled('div')(({ theme }) => ({ - color: theme.palette_alpha.neutral[500], - display: 'grid', - gridGap: 32, - gridTemplateColumns: '186px auto', - paddingLeft: 8, -})); - -export const Styles: Story = () => ( - // @ts-expect-error 2679 - - - - Display - - 48px/52px/-1% -
    - Extrabold -
    - Poppins -     -     - - - Empower Learners everywhere - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - Oversized screen titles. Use in moderation - - - - - T32 - - 32px/40px/-1% -
    - Bold -
    - Poppins -     -     - - - Empower Learners everywhere - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - - Empty states and feature introductions. Top level headers. - - - - - - T28 - - 28px/36px/-1% -
    - Bold -
    - Poppins -     -     - - - Empower Learners everywhere - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - Main titles, use only once per page. Typical H1. - - - - - T22 - - 22px/38px/-1% -
    - Semibold -
    - Poppins -     -     - - - Empower Learners everywhere - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - Headings that identify key functionality. - - - - - T18 - - 18px/28px/-1% -
    - Semibold -
    - Poppins -     -     - - - Empower Learners everywhere - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - Sub-section and field group headings. - - - - - T14 - - 14px/20px/4%/uppercase -
    - Extrabold -
    - Poppins -     -     - - Passion to Learn - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - - Heading up a group of list items, stylized heading for different - areas. - - - - - - Body - - 16px/24px -
    - Regular -
    - Inter -
    - (cv05,ss03) -     -     - - - Body - When we allow students to own their education, connect them - with quality learning tools, caring adults, and a community, their - natural love of learning takes over and they become unstoppable. - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - Paragraph text, field inputs, general copy. - - - - - Label - - 16px/20px -
    - Semi-bold -
    - Inter -
    - (cv05,ss03) -     -     - - Label - Select grades - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - Field labels, list groupings, strong body copy - - - - - Description - - 14px/20px -
    - Regular -
    - Inter -
    - (cv05,ss03) -     -     - - - Description - When we allow students to own their education, connect - them with quality learning tools, caring adults, and a community, - their natural love of learning takes over and they become unstoppable. - - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - - Smaller text for hints, disclaimers, other areas where small text is - needed. - - - - - - Code - - 14px/24px -
    - Regular -
    - Roboto Mono -     -     - - - {``} -
    -
    - {`

    This is {mystring}

    `} -     - - {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} - // Use for // - - Smaller text for hints, disclaimers, other areas where small text is - needed. - - -     -     -     -); diff --git a/libs/spark/src/alpha/theme/typography.ts b/libs/spark/src/alpha/theme/typography.ts deleted file mode 100644 index 9a7912a8a..000000000 --- a/libs/spark/src/alpha/theme/typography.ts +++ /dev/null @@ -1,115 +0,0 @@ -import type { - TypographyUtils, - TypographyStyle, - TypographyStyleOptions, - FontStyleOptions, -} from '@material-ui/core/styles/createTypography'; -import { buildVariant as buildVariant_stable } from '../../theme/typography'; - -export type TypographyVariant = - | 'display' - | 'T32' - | 'T28' - | 'T22' - | 'T18' - | 'T14' - | 'body' - | 'label' - | 'description' - | 'code'; - -export interface TypographyOptions - extends TypographyUtils, - Partial< - Record & FontStyleOptions - > {} - -const codeFontFamily = '"Roboto Mono", monospace'; -const defaultFontFamily = '"Inter", sans-serif'; -const headingFontFamily = '"Poppins", sans-serif'; -const defaultFontSize = 16; -const pxToRem = (px: number) => `${px / defaultFontSize}rem`; - -export const buildVariant = ( - fontWeight: number, - fontSize: number, - lineHeight: number, - letterSpacing?: number, - textTransform?: 'uppercase' | 'none', - fontFamily: string = defaultFontFamily, - fontFeatureSettings?: string -) => - buildVariant_stable( - fontWeight, - fontSize, - lineHeight, - letterSpacing, - textTransform, - fontFamily, - fontFeatureSettings - ); - -const customVariants: Record = { - display: buildVariant(800, 48, 52, -0.01, undefined, headingFontFamily), - T32: buildVariant(700, 32, 40, -0.01, undefined, headingFontFamily), - T28: buildVariant(700, 28, 36, -0.01, undefined, headingFontFamily), - T22: buildVariant(600, 22, 28, -0.01, undefined, headingFontFamily), - T18: buildVariant(600, 18, 28, -0.01, undefined, headingFontFamily), - T14: buildVariant(800, 14, 20, 0.04, 'uppercase', headingFontFamily), - body: buildVariant( - 400, - 16, - 24, - undefined, - undefined, - defaultFontFamily, - "'cv05' 1, 'ss03' 1" - ), - label: buildVariant( - 600, - 16, - 20, - undefined, - undefined, - defaultFontFamily, - "'cv05' 1, 'ss03' 1" - ), - description: buildVariant( - 400, - 14, - 20, - undefined, - undefined, - defaultFontFamily, - "'cv05' 1, 'ss03' 1" - ), - code: buildVariant(400, 14, 24, undefined, undefined, codeFontFamily), -}; - -const typography: TypographyOptions = { - // override default Roboto - fontFamily: defaultFontFamily, - // override default 14px - fontSize: defaultFontSize, - // override default division by 14 - pxToRem, - // :v2.0.0: uncomment once merged - // specify all mui defaults (some Mui components rely on these by default) - // h1: customVariants['T28'], - // h2: customVariants['T22'], - // h3: customVariants['T22'], - // h4: customVariants['T22'], - // h5: customVariants['T18'], - // h6: customVariants['T18'], - // subtitle1: customVariants['description'], - // subtitle2: customVariants['description'], - // body1: customVariants['body'], - // body2: customVariants['body'], - // override default text transform - // button: { ...customVariants['body'], textTransform: 'none' }, - // caption: customVariants['description'], - // overline: customVariants['T14'], - ...customVariants, -}; - -export default typography; diff --git a/libs/spark/src/alpha/useAutocomplete/index.ts b/libs/spark/src/alpha/useAutocomplete/index.ts deleted file mode 100644 index 6f0131868..000000000 --- a/libs/spark/src/alpha/useAutocomplete/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './useAutocomplete'; -export * from './useAutocomplete'; diff --git a/libs/spark/src/alpha/useAutocomplete/useAutocomplete.ts b/libs/spark/src/alpha/useAutocomplete/useAutocomplete.ts deleted file mode 100644 index dfc3896a9..000000000 --- a/libs/spark/src/alpha/useAutocomplete/useAutocomplete.ts +++ /dev/null @@ -1,151 +0,0 @@ -import type { - UseAutocompleteProps as UseAutocompleteProps_mui, - UseAutocompleteResultGetClearProps as UseAutocompleteResultGetClearProps_mui, - UseAutocompleteResultGetInputLabelProps as UseAutocompleteResultGetInputLabelProps_mui, - UseAutocompleteResultGetInputProps as UseAutocompleteResultGetInputProps_mui, - UseAutocompleteResultGetListboxProps as UseAutocompleteResultGetListboxProps_mui, - UseAutocompleteResultGetOptionProps as UseAutocompleteResultGetOptionProps_mui, - UseAutocompleteResultGetPopupIndicatorProps as UseAutocompleteResultGetPopupIndicatorProps_mui, - UseAutocompleteResultGetRootProps as UseAutocompleteResultGetRootProps_mui, - UseAutocompleteResultGetTagProps as UseAutocompleteResultGetTagProps_mui, - Value as Value_mui, -} from '@material-ui/lab/useAutocomplete'; -import useAutocomplete_mui, { - createFilterOptions as createFilterOptions_mui, -} from '@material-ui/lab/useAutocomplete'; -import type { HTMLAttributes } from 'react'; - -export const createFilterOptions = createFilterOptions_mui; - -export type UseAutocompleteValue< - T, - Multiple extends boolean | undefined, - DisableClearable extends boolean | undefined, - FreeSolo extends boolean | undefined -> = Value_mui; - -export type UseAutocompleteProps< - T, - Multiple extends boolean | undefined, - DisableClearable extends boolean | undefined, - FreeSolo extends boolean | undefined -> = UseAutocompleteProps_mui & { - disabled?: boolean; -}; - -export interface UseAutocompleteResult< - T, - Multiple extends boolean | undefined, - DisableClearable extends boolean | undefined, - FreeSolo extends boolean | undefined -> { - getRootProps: UseAutocompleteResultGetRootProps; - getInputProps: UseAutocompleteResultGetInputProps; - getInputLabelProps: UseAutocompleteResultGetInputLabelProps; - getClearIndicatorProps: UseAutocompleteResultGetClearIndicatorProps; - getPopupIndicatorProps: UseAutocompleteResultGetPopupIndicatorProps; - getMultipleValueProps: UseAutocompleteResultGetMultipleValueProps; - getListboxProps: UseAutocompleteResultGetListboxProps; - getOptionProps: UseAutocompleteResultGetOptionProps; - id: string; - inputValue: string; - value: UseAutocompleteValue; - dirty: boolean; - popupOpen: boolean; - focused: boolean; - anchorEl: null | HTMLElement; - setAnchorEl: () => void; - focusedTag: number; - groupedOptions: - | T[] - | { - key: number; - index: number; - group: string; - options: T[]; - }[]; -} - -export type UseAutocompleteResultGetRootProps = - UseAutocompleteResultGetRootProps_mui; - -export type UseAutocompleteResultGetInputProps = - UseAutocompleteResultGetInputProps_mui; - -export type UseAutocompleteResultGetInputLabelProps = - UseAutocompleteResultGetInputLabelProps_mui; - -export type UseAutocompleteResultGetClearIndicatorProps = - UseAutocompleteResultGetClearProps_mui; - -export type UseAutocompleteResultGetPopupIndicatorProps = - UseAutocompleteResultGetPopupIndicatorProps_mui; - -export type UseAutocompleteResultGetMultipleValueProps = ( - option: T, - index: number -) => ReturnType & - Pick, 'role'> & { - 'aria-disabled': boolean; // narrower than base attribute type - }; - -export type UseAutocompleteResultGetListboxProps = - UseAutocompleteResultGetListboxProps_mui; - -export type UseAutocompleteResultGetOptionProps = ( - option: T, - index: number -) => ReturnType> & { - 'aria-disabled': boolean; // narrower than base attribute type - 'aria-selected': boolean; // narrower than base attribute type -}; - -function useAutocomplete< - T, - Multiple extends boolean | undefined, - DisableClearable extends boolean | undefined, - FreeSolo extends boolean | undefined ->( - props: UseAutocompleteProps -): UseAutocompleteResult { - const { - getClearProps, - getOptionProps: getAutocompleteOptionProps, - getTagProps, - inputValue, - ...other - } = useAutocomplete_mui(props); - - const getClearIndicatorProps: UseAutocompleteResultGetClearIndicatorProps = - getClearProps; - - const getOptionProps: UseAutocompleteResultGetOptionProps = ( - option, - index - ) => { - return getAutocompleteOptionProps({ option, index }) as ReturnType< - UseAutocompleteResultGetOptionProps - >; - }; - - const getMultipleValueProps: UseAutocompleteResultGetMultipleValueProps = ( - option, - index - ) => { - return { - 'aria-disabled': props.disabled, - role: 'button', - ...getTagProps({ index }), - }; - }; - - return { - ...other, - getClearIndicatorProps, - getOptionProps, - getMultipleValueProps, - inputValue, - }; -} - -export default useAutocomplete; diff --git a/libs/spark/src/alpha/useAutocomplete/useAutocomplete_mui.ts b/libs/spark/src/alpha/useAutocomplete/useAutocomplete_mui.ts deleted file mode 100644 index f66a508e3..000000000 --- a/libs/spark/src/alpha/useAutocomplete/useAutocomplete_mui.ts +++ /dev/null @@ -1,92 +0,0 @@ -import type { - UseAutocompleteProps, - Value, -} from '@material-ui/lab/useAutocomplete'; -import type { HTMLAttributes, Key, LabelHTMLAttributes, Ref } from 'react'; - -declare module '@material-ui/lab/useAutocomplete' { - export default function useAutocomplete< - T, - Multiple extends boolean | undefined = undefined, - DisableClearable extends boolean | undefined = undefined, - FreeSolo extends boolean | undefined = undefined - >( - props: UseAutocompleteProps - ): { - getRootProps: UseAutocompleteResultGetRootProps; - getInputProps: UseAutocompleteResultGetInputProps; - getInputLabelProps: UseAutocompleteResultGetInputLabelProps; - getClearProps: UseAutocompleteResultGetClearProps; - getPopupIndicatorProps: UseAutocompleteResultGetPopupIndicatorProps; - getTagProps: UseAutocompleteResultGetTagProps; - getListboxProps: UseAutocompleteResultGetListboxProps; - getOptionProps: UseAutocompleteResultGetOptionProps; - id: string; - inputValue: string; - value: Value; - dirty: boolean; - popupOpen: boolean; - focused: boolean; - anchorEl: null | HTMLElement; - setAnchorEl: () => void; - focusedTag: number; - groupedOptions: T[]; - }; - - export type UseAutocompleteResultGetRootProps = ( - other: HTMLAttributes - ) => HTMLAttributes; - - export type UseAutocompleteResultGetInputProps = - () => HTMLAttributes; - - export type UseAutocompleteResultGetInputLabelProps = () => Pick< - LabelHTMLAttributes, - 'id' | 'htmlFor' - >; - - export type UseAutocompleteResultGetClearProps = () => Pick< - HTMLAttributes, - 'tabIndex' | 'onClick' - >; - export type UseAutocompleteResultGetPopupIndicatorProps = () => Pick< - HTMLAttributes, - 'tabIndex' | 'onClick' - >; - - export type UseAutocompleteResultGetTagProps = (params: { - index: number; - }) => Pick, 'tabIndex'> & { - key: Key; - 'data-tag-index': number; - onDelete?: (index: number) => void; - }; - - export type UseAutocompleteResultGetListboxProps = () => Pick< - HTMLAttributes, - 'role' | 'id' | 'aria-labelledby' | 'onMouseDown' - > & { - ref: Ref; - }; - - export type UseAutocompleteResultGetOptionProps = ({ - option, - index, - }: { - option: T; - index: number; - }) => Pick< - HTMLAttributes, - | 'tabIndex' - | 'role' - | 'id' - | 'onMouseOver' - | 'onClick' - | 'onTouchStart' - | 'aria-disabled' - | 'aria-selected' - > & { - key: Key; - 'data-option-index': number; - }; -} diff --git a/libs/spark/src/alpha/useDropdown/index.ts b/libs/spark/src/alpha/useDropdown/index.ts deleted file mode 100644 index a4b0c7518..000000000 --- a/libs/spark/src/alpha/useDropdown/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useDropdown'; diff --git a/libs/spark/src/alpha/useDropdown/useDropdown.ts b/libs/spark/src/alpha/useDropdown/useDropdown.ts deleted file mode 100644 index bb1503981..000000000 --- a/libs/spark/src/alpha/useDropdown/useDropdown.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useContext } from 'react'; -import type { DropdownContextValue } from '../DropdownContext'; -import DropdownContext from '../DropdownContext'; - -const useDropdown = (): DropdownContextValue => { - return useContext(DropdownContext); -}; - -export default useDropdown; diff --git a/libs/spark/src/alpha/useFormControl/index.ts b/libs/spark/src/alpha/useFormControl/index.ts deleted file mode 100644 index f795efb90..000000000 --- a/libs/spark/src/alpha/useFormControl/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './useFormControl'; -export * from './useFormControl'; diff --git a/libs/spark/src/alpha/useFormControl/useFormControl.ts b/libs/spark/src/alpha/useFormControl/useFormControl.ts deleted file mode 100644 index f142dcbdf..000000000 --- a/libs/spark/src/alpha/useFormControl/useFormControl.ts +++ /dev/null @@ -1,149 +0,0 @@ -import { useFormControl as useFormControl_mui } from '@material-ui/core/FormControl'; -import useFormControlExtra from '../useFormControlExtra/useFormControlExtra'; - -export type UseFormControlParams = Partial< - Omit ->; - -export type UseFormControlResult = FormControlProperties; - -export type FormControlProperties = { - /** - * Whether the components display in a disabled state. - */ - disabled: boolean; - /** - * Whether the components display in an error state. - */ - error: boolean; - /** - * Whether the components take up the full width of the container. - */ - fullWidth: boolean; - /** - * Whether the components display as required. - */ - required: boolean; - /** - * The size of the components. - */ - size: 'medium' | 'small'; - /** - * Whether the components display in a success state. - */ - success: boolean; - /** - * The id of the input element. - */ - inputId?: string; - /** - * The id of the label element. - */ - labelId?: string; - /** - * The id of the helper text element. - */ - helperTextId?: string; - /** - * Whether the components display as filled. - */ - filled?: boolean; - /** - * Whether the components display as focused. - */ - focused?: boolean; - onBlur?: () => void; - onEmpty?: () => void; - onFilled?: () => void; - onFocus?: () => void; -}; - -export const DEFAULT_FORM_CONTROL_API_VALUES: Readonly = - { - disabled: false, - error: false, - fullWidth: false, - required: false, - size: 'medium', - success: false, - }; - -const useFormControl = ( - params: UseFormControlParams = {} -): UseFormControlResult => { - const muiFormControl = useFormControl_mui(); - const formControlExtra = useFormControlExtra(params); - - // always let consumer override => prefer passed parameters -- note, the consumer can't override mui form control internals given that their api doesn't accept parameters, so consumer overrides of those attributes are isolated to the single, calling component - - let disabled: FormControlProperties['disabled']; - if (typeof params.disabled !== 'undefined') { - disabled = params.disabled; - } else if (muiFormControl) { - disabled = muiFormControl.disabled; - } else { - disabled = DEFAULT_FORM_CONTROL_API_VALUES.disabled; - } - - let error: FormControlProperties['error']; - if (typeof params.error !== 'undefined') { - error = params.error; - } else if (muiFormControl) { - error = muiFormControl.error; - } else { - error = DEFAULT_FORM_CONTROL_API_VALUES.error; - } - - let fullWidth: FormControlProperties['fullWidth']; - if (typeof params.fullWidth !== 'undefined') { - fullWidth = params.fullWidth; - } else if (muiFormControl) { - fullWidth = muiFormControl.fullWidth; - } else { - fullWidth = DEFAULT_FORM_CONTROL_API_VALUES.fullWidth; - } - - let required: FormControlProperties['required']; - if (typeof params.required !== 'undefined') { - required = params.required; - } else if (muiFormControl) { - required = muiFormControl.required; - } else { - required = DEFAULT_FORM_CONTROL_API_VALUES.required; - } - - let filled: FormControlProperties['filled']; - if (typeof params.filled !== 'undefined') { - filled = params.filled; - } else if (muiFormControl) { - filled = muiFormControl.filled; - } - - let focused: FormControlProperties['focused']; - if (typeof params.focused !== 'undefined') { - focused = params.focused; - } else if (muiFormControl) { - focused = muiFormControl.focused; - } - - return { - disabled, - error, - fullWidth, - required, - size: formControlExtra.size, - success: formControlExtra.success, - inputId: formControlExtra.inputId, - labelId: formControlExtra.labelId, - helperTextId: formControlExtra.helperTextId, - ...(filled && { filled }), - ...(focused && { focused }), - // determined completely by mui-internals - ...(muiFormControl?.onBlur && { onBlur: muiFormControl?.onBlur }), - ...(muiFormControl?.onEmpty && { onEmpty: muiFormControl?.onEmpty }), - ...(muiFormControl?.onFilled && { onFilled: muiFormControl?.onFilled }), - ...(muiFormControl?.onFocus && { onBlur: muiFormControl?.onFocus }), - }; -}; - -export default useFormControl; diff --git a/libs/spark/src/alpha/useFormControlExtra/index.ts b/libs/spark/src/alpha/useFormControlExtra/index.ts deleted file mode 100644 index cea7a81c4..000000000 --- a/libs/spark/src/alpha/useFormControlExtra/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useFormControlExtra'; diff --git a/libs/spark/src/alpha/useFormControlExtra/useFormControlExtra.ts b/libs/spark/src/alpha/useFormControlExtra/useFormControlExtra.ts deleted file mode 100644 index f64743e6d..000000000 --- a/libs/spark/src/alpha/useFormControlExtra/useFormControlExtra.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { useContext } from 'react'; -import FormControlExtraContext from '../FormControlExtraContext'; -import type { FormControlProperties } from '../useFormControl'; -import { DEFAULT_FORM_CONTROL_API_VALUES } from '../useFormControl'; - -/** internal */ -export type UseFormControlExtraParams = Partial< - Pick< - FormControlProperties, - 'inputId' | 'labelId' | 'helperTextId' | 'size' | 'success' - > ->; - -/** internal */ -export type UseFormControlExtraResult = Pick< - FormControlProperties, - 'inputId' | 'labelId' | 'helperTextId' | 'size' | 'success' ->; - -/** internal */ -const useFormControlExtra = ( - params: UseFormControlExtraParams -): UseFormControlExtraResult => { - const formControlExtra = useContext(FormControlExtraContext); - - // always let consumer override => prefer passed parameters - - let inputId: FormControlProperties['inputId']; - if (typeof params.inputId !== 'undefined') { - inputId = params.inputId; - } else if (formControlExtra) { - inputId = formControlExtra.inputId; - } - - let labelId: FormControlProperties['labelId']; - if (typeof params.labelId !== 'undefined') { - labelId = params.labelId; - } else if (inputId) { - labelId = `${inputId}-label`; - } - - let helperTextId: FormControlProperties['helperTextId']; - if (typeof params.helperTextId !== 'undefined') { - helperTextId = params.helperTextId; - } else if (inputId) { - helperTextId = `${inputId}-helper-text`; - } - - let size: FormControlProperties['size']; - if (typeof params.size !== 'undefined') { - size = params.size; - } else if (formControlExtra) { - size = formControlExtra.size; - } else { - size = DEFAULT_FORM_CONTROL_API_VALUES.size; - } - - let success: FormControlProperties['success']; - if (typeof params.success !== 'undefined') { - success = params.success; - } else if (formControlExtra) { - success = formControlExtra.success; - } else { - success = DEFAULT_FORM_CONTROL_API_VALUES.success; - } - - return { - inputId, - labelId, - helperTextId, - size, - success, - }; -}; - -export default useFormControlExtra; diff --git a/libs/spark/src/alpha/useMediaQuery/index.ts b/libs/spark/src/alpha/useMediaQuery/index.ts deleted file mode 100644 index c996e8b7e..000000000 --- a/libs/spark/src/alpha/useMediaQuery/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useMediaQuery'; diff --git a/libs/spark/src/alpha/useMediaQuery/useMediaQuery.test.ts b/libs/spark/src/alpha/useMediaQuery/useMediaQuery.test.ts deleted file mode 100644 index 601cf68d1..000000000 --- a/libs/spark/src/alpha/useMediaQuery/useMediaQuery.test.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; -import useMediaQuery from './useMediaQuery'; - -describe('useMediaQuery', () => { - it('Can render without ThemeProvider', () => { - const { result } = renderHook(() => - useMediaQuery((theme) => theme.breakpoints.down('sm')) - ); - - expect(typeof result.current).toEqual('boolean'); - }); -}); diff --git a/libs/spark/src/alpha/useMediaQuery/useMediaQuery.ts b/libs/spark/src/alpha/useMediaQuery/useMediaQuery.ts deleted file mode 100644 index 7a3ee1ec0..000000000 --- a/libs/spark/src/alpha/useMediaQuery/useMediaQuery.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { Options } from '@material-ui/core/useMediaQuery'; -import useMuiMediaQuery from '@material-ui/core/useMediaQuery'; -import type { Theme } from '../../theme'; -import useTheme from '../useTheme'; - -const useMediaQuery = ( - queryInput: string | ((theme: Theme) => string), - options: Options = {} -): boolean => { - const theme = useTheme(); - - const query = - typeof queryInput === 'function' ? queryInput(theme) : queryInput; - - return useMuiMediaQuery(query, options); -}; - -export default useMediaQuery; diff --git a/libs/spark/src/alpha/useRadioGroupExtra/index.ts b/libs/spark/src/alpha/useRadioGroupExtra/index.ts deleted file mode 100644 index c61b70e77..000000000 --- a/libs/spark/src/alpha/useRadioGroupExtra/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useRadioGroupExtra'; diff --git a/libs/spark/src/alpha/useRadioGroupExtra/useRadioGroupExtra.ts b/libs/spark/src/alpha/useRadioGroupExtra/useRadioGroupExtra.ts deleted file mode 100644 index b0774482a..000000000 --- a/libs/spark/src/alpha/useRadioGroupExtra/useRadioGroupExtra.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useContext } from 'react'; -import RadioGroupExtraContext from '../RadioGroupExtraContext'; - -const useRadioGroupExtra = () => { - return useContext(RadioGroupExtraContext); -}; - -export default useRadioGroupExtra; diff --git a/libs/spark/src/alpha/useSideBar/index.ts b/libs/spark/src/alpha/useSideBar/index.ts deleted file mode 100644 index 4254d5701..000000000 --- a/libs/spark/src/alpha/useSideBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useSideBar'; diff --git a/libs/spark/src/alpha/useSideBar/useSideBar.ts b/libs/spark/src/alpha/useSideBar/useSideBar.ts deleted file mode 100644 index b6d313f05..000000000 --- a/libs/spark/src/alpha/useSideBar/useSideBar.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { useContext } from 'react'; -import SideBarContext from '../SideBarContext'; - -const useSideBar = () => useContext(SideBarContext); - -export default useSideBar; diff --git a/libs/spark/src/alpha/useSideBarTrigger/index.ts b/libs/spark/src/alpha/useSideBarTrigger/index.ts deleted file mode 100644 index 3ec865d79..000000000 --- a/libs/spark/src/alpha/useSideBarTrigger/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useSideBarTrigger'; diff --git a/libs/spark/src/alpha/useSideBarTrigger/useSideBarTrigger.ts b/libs/spark/src/alpha/useSideBarTrigger/useSideBarTrigger.ts deleted file mode 100644 index c82d2eb9b..000000000 --- a/libs/spark/src/alpha/useSideBarTrigger/useSideBarTrigger.ts +++ /dev/null @@ -1,97 +0,0 @@ -import type { TransitionProps } from '@material-ui/core/transitions'; -import type { ButtonProps } from '../Button'; -import type { IconButtonProps } from '../IconButton'; -import useSideBar from '../useSideBar'; -import { useMediaQuery } from '..'; -import { useEffect } from 'react'; - -export type UseSideBarTriggerParams = ( - | { - action: 'close'; - hideOnMdUp?: boolean; - } - | { - action: 'open'; - hideOnMdUp?: boolean; - hideWhenSideBarOpen?: boolean; - } -) & { - hidden?: boolean; -}; - -export type UseSideBarTriggerResult = { - hidden: boolean; - IconButtonProps: Pick; - ButtonProps: Pick; - TransitionProps: Pick; -}; - -const useSideBarTrigger = ( - params: UseSideBarTriggerParams -): UseSideBarTriggerResult => { - const sideBar = useSideBar(); - const isTabletOrMobile = useMediaQuery( - (theme) => theme.breakpoints.down('md'), - { noSsr: true } // prevent inaccurate initial value - ); - const isMobile = useMediaQuery( - (theme) => theme.breakpoints.down('xs'), - { noSsr: true } // prevent inaccurate initial value - ); - - if (sideBar === null) { - throw new Error('Missing SideBarProvider'); - } - - const handleClick = () => { - if (params.action === 'open') { - sideBar.open(); - } else if (params.action === 'close') { - sideBar.close(); - } - }; - - let hidden = false; - - if (params.hidden !== undefined) { - hidden = params.hidden; - } else if (params.action === 'close' && params.hideOnMdUp !== false) { - hidden = !isTabletOrMobile; - } else if (params.action === 'open' && isMobile) { - hidden = false; - } else if ( - params.action === 'open' && - params.hideWhenSideBarOpen !== false && - sideBar.isOpen - ) { - hidden = true; - } else if (params.action === 'open' && params.hideOnMdUp !== false) { - hidden = !isTabletOrMobile; - } - - const ariaLabel = - params.action === 'close' ? 'Close side bar' : 'Open side bar'; - - useEffect(() => { - if (params.action === 'open' && hidden && !sideBar.isOpen) { - // then there's no way to open it - sideBar.open(); - } - }, [params.action, hidden, sideBar]); - - return { - hidden, - IconButtonProps: { - 'aria-label': ariaLabel, - onClick: handleClick, - }, - ButtonProps: { - onClick: handleClick, - }, - TransitionProps: { - in: !hidden, - }, - }; -}; - -export default useSideBarTrigger; diff --git a/libs/spark/src/alpha/useTabs/index.ts b/libs/spark/src/alpha/useTabs/index.ts deleted file mode 100644 index e3160d5c2..000000000 --- a/libs/spark/src/alpha/useTabs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useTabs'; diff --git a/libs/spark/src/alpha/useTabs/useTabs.ts b/libs/spark/src/alpha/useTabs/useTabs.ts deleted file mode 100644 index d5af20beb..000000000 --- a/libs/spark/src/alpha/useTabs/useTabs.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useTabContext as useMuiTabContext } from '@material-ui/lab/TabContext'; -import { useContext } from 'react'; -import type { TabsContextValue } from '../TabsContext'; -import TabsContext from '../TabsContext'; - -const useTabs = (): TabsContextValue => { - const value = useContext(TabsContext); - const muiValue = useMuiTabContext(); - if (value === null) { - return null; - } else { - return { ...muiValue, ...value }; - } -}; - -export default useTabs; diff --git a/libs/spark/src/alpha/useTheme/index.ts b/libs/spark/src/alpha/useTheme/index.ts deleted file mode 100644 index 9c47c391c..000000000 --- a/libs/spark/src/alpha/useTheme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useTheme'; diff --git a/libs/spark/src/alpha/useTheme/useTheme.test.ts b/libs/spark/src/alpha/useTheme/useTheme.test.ts deleted file mode 100644 index c62f093b0..000000000 --- a/libs/spark/src/alpha/useTheme/useTheme.test.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; -import useTheme from './useTheme'; - -describe('useTheme', () => { - it('Can render without ThemeProvider', () => { - const { result } = renderHook(() => useTheme()); - - expect(result.current).toBeTruthy(); - expect(result.current.borders_alpha).toBeTruthy(); - expect(result.current.palette_alpha).toBeTruthy(); - expect(result.current.typography_alpha).toBeTruthy(); - }); -}); diff --git a/libs/spark/src/alpha/useTheme/useTheme.ts b/libs/spark/src/alpha/useTheme/useTheme.ts deleted file mode 100644 index 52d550e76..000000000 --- a/libs/spark/src/alpha/useTheme/useTheme.ts +++ /dev/null @@ -1,15 +0,0 @@ -import useMuiTheme from '@material-ui/core/styles/useTheme'; -import type { Theme } from '../../theme'; -import initialTheme from '../../theme/initialTheme'; - -const useTheme = (): Theme => { - let theme = useMuiTheme(); - - if (typeof theme.palette_alpha === 'undefined') { - theme = initialTheme; - } - - return theme; -}; - -export default useTheme; diff --git a/libs/spark/src/alpha/useToasts/index.ts b/libs/spark/src/alpha/useToasts/index.ts deleted file mode 100644 index bd09ac2f7..000000000 --- a/libs/spark/src/alpha/useToasts/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useToasts'; diff --git a/libs/spark/src/alpha/useToasts/useToasts.ts b/libs/spark/src/alpha/useToasts/useToasts.ts deleted file mode 100644 index e7776925a..000000000 --- a/libs/spark/src/alpha/useToasts/useToasts.ts +++ /dev/null @@ -1,62 +0,0 @@ -import type { OptionsObject as NotistackOptionsObject } from 'notistack'; -import { useSnackbar as useNotistackSnackbar } from 'notistack'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; -import type { ToastsContextValue } from '../ToastsContext'; -import type { _Enqueue } from '../ToastsContext/ToastsContext'; - -const useToasts = (): ToastsContextValue => { - const _notistackSnackbar = useNotistackSnackbar(); - - const notistackSnackbarRef = useRef(_notistackSnackbar); - useEffect(() => { - notistackSnackbarRef.current = _notistackSnackbar; - }); - - const close: ToastsContextValue['close'] = useCallback((id) => { - notistackSnackbarRef.current.closeSnackbar(id); - }, []); - - const closeAll: ToastsContextValue['closeAll'] = useCallback(() => { - notistackSnackbarRef.current.closeSnackbar(); - }, []); - - const _enqueue: _Enqueue = useCallback((children, options = {}) => { - const { id, placement = 'bottom-center', ...other } = options; - - const anchorOrigin: NotistackOptionsObject['anchorOrigin'] = - placement === 'bottom-center' - ? { vertical: 'bottom', horizontal: 'center' } - : placement === 'bottom-left' - ? { vertical: 'bottom', horizontal: 'left' } - : placement === 'bottom-right' - ? { vertical: 'bottom', horizontal: 'right' } - : { vertical: 'bottom', horizontal: 'center' }; - - return notistackSnackbarRef.current.enqueueSnackbar({ - anchorOrigin, - key: id, - message: children as string, - variant: 'default', - ...other, - hideIconVariant: true, - }); - }, []); - - const value = useMemo(() => { - const enqueue = _enqueue as ToastsContextValue['enqueue']; - enqueue.error = (children, options = {}) => - enqueue(children, { severity: 'error', ...options }); - enqueue.info = (children, options = {}) => - enqueue(children, { severity: 'info', ...options }); - enqueue.success = (children, options = {}) => - enqueue(children, { severity: 'success', ...options }); - enqueue.warning = (children, options = {}) => - enqueue(children, { severity: 'warning', ...options }); - - return { close, closeAll, enqueue }; - }, [close, closeAll, _enqueue]); - - return value; -}; - -export default useToasts; diff --git a/libs/spark/src/createSvgIcon_unstable/index.ts b/libs/spark/src/createSvgIcon_unstable/index.ts deleted file mode 100644 index 5a7891825..000000000 --- a/libs/spark/src/createSvgIcon_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/createSvgIcon` */ - default, -} from '../alpha/createSvgIcon'; diff --git a/libs/spark/src/index.ts b/libs/spark/src/index.ts deleted file mode 100644 index 6256d27b2..000000000 --- a/libs/spark/src/index.ts +++ /dev/null @@ -1,464 +0,0 @@ -export { default as Autocomplete } from './Autocomplete'; -export * from './Autocomplete'; - -export { default as Avatar } from './Avatar'; -export * from './Avatar'; - -export { default as Banner } from './Banner'; -export * from './Banner'; - -export { default as Breadcrumbs } from './Breadcrumbs'; -export * from './Breadcrumbs'; - -export { default as Box } from './Box'; -export * from './Box'; - -export { default as Button } from './Button'; -export * from './Button'; - -export { default as ButtonBase } from './ButtonBase'; -export * from './ButtonBase'; - -export { default as Card } from './Card'; -export * from './Card'; - -export { default as CardActions } from './CardActions'; -export * from './CardActions'; - -export { default as CardContent } from './CardContent'; -export * from './CardContent'; - -export { default as CardMedia } from './CardMedia'; -export * from './CardMedia'; - -export { default as Checkbox } from './Checkbox'; -export * from './Checkbox'; - -export { default as CircularProgress_unstable } from './CircularProgress_unstable'; -export * from './CircularProgress_unstable'; - -export { default as Collapse } from './Collapse'; -export * from './Collapse'; - -export { default as CssBaseline } from './CssBaseline'; - -export { default as Divider } from './Divider'; -export * from './Divider'; - -export { default as Drawer_unstable } from './Drawer_unstable'; -export * from './Drawer_unstable'; - -export { default as DropdownAnchor } from './DropdownAnchor'; -export * from './DropdownAnchor'; - -export { default as DropdownContext } from './DropdownContext'; -export * from './DropdownContext'; - -export { default as DropdownMenu } from './DropdownMenu'; -export * from './DropdownMenu'; - -export { default as FontFacesBaseline } from './FontFacesBaseline'; - -export { default as FormControl } from './FormControl'; -export * from './FormControl'; - -export { default as FormControlLabel } from './FormControlLabel'; -export * from './FormControlLabel'; - -export { default as FormGroup } from './FormGroup'; -export * from './FormGroup'; - -export { default as FormHelperText } from './FormHelperText'; -export * from './FormHelperText'; - -export { default as FormLabel } from './FormLabel'; -export * from './FormLabel'; - -export { default as Grid } from './Grid'; -export * from './Grid'; - -export { default as IconButton } from './IconButton'; -export * from './IconButton'; - -export { default as Input } from './Input'; -export * from './Input'; - -export { default as InputAdornment } from './InputAdornment'; -export * from './InputAdornment'; - -export { default as InputBase } from './InputBase'; -export * from './InputBase'; - -export { default as InputLabel } from './InputLabel'; -export * from './InputLabel'; - -export { default as LinearProgress_unstable } from './LinearProgress_unstable'; -export * from './LinearProgress_unstable'; - -export { default as Link } from './Link'; -export * from './Link'; - -export { default as List } from './List'; -export * from './List'; - -export { default as ListItem } from './ListItem'; -export * from './ListItem'; - -export { default as ListItemAvatar } from './ListItemAvatar'; -export * from './ListItemAvatar'; - -export { default as ListItemIcon } from './ListItemIcon'; -export * from './ListItemIcon'; - -export { default as ListItemText } from './ListItemText'; -export * from './ListItemText'; - -export { default as ListItemSecondaryAction } from './ListItemSecondaryAction'; -export * from './ListItemSecondaryAction'; - -export { default as ListSubheader } from './ListSubheader'; -export * from './ListSubheader'; - -export { default as Menu } from './Menu'; -export * from './Menu'; - -export { default as MenuItem } from './MenuItem'; -export * from './MenuItem'; - -export { default as MenuList } from './MenuList'; -export * from './MenuList'; - -export { default as Pagination } from './Pagination'; -export * from './Pagination'; - -export { default as PaginationItem } from './PaginationItem'; -export * from './PaginationItem'; - -export { default as Paper } from './Paper'; -export * from './Paper'; - -export { default as Radio } from './Radio'; -export * from './Radio'; - -export { default as RadioGroup } from './RadioGroup'; -export * from './RadioGroup'; - -export { default as ScopedCssBaseline } from './ScopedCssBaseline'; -export * from './ScopedCssBaseline'; - -export { default as SectionMessage } from './SectionMessage'; -export * from './SectionMessage'; - -export { default as SectionMessageTitle } from './SectionMessageTitle'; -export * from './SectionMessageTitle'; - -export { default as Select } from './Select'; -export * from './Select'; - -export { default as SideBarContext_unstable } from './SideBarContext_unstable'; -export * from './SideBarContext_unstable'; - -export { default as SideBarDrawer_unstable } from './SideBarDrawer_unstable'; -export * from './SideBarDrawer_unstable'; - -export { default as SideBarList_unstable } from './SideBarList_unstable'; -export * from './SideBarList_unstable'; - -export { default as SideBarListItem_unstable } from './SideBarListItem_unstable'; -export * from './SideBarListItem_unstable'; - -export { default as SideBarListSubheader_unstable } from './SideBarListSubheader_unstable'; -export * from './SideBarListSubheader_unstable'; - -export { default as SideBarProvider_unstable } from './SideBarProvider_unstable'; -export * from './SideBarProvider_unstable'; - -export { default as Skeleton } from './Skeleton'; -export * from './Skeleton'; - -export { default as SparkThemeProvider } from './SparkThemeProvider'; - -export { default as Step } from './Step'; -export * from './Step'; - -export { default as StepButton } from './StepButton'; -export * from './StepButton'; - -export { default as StepConnector } from './StepConnector'; -export * from './StepConnector'; - -export { default as StepContent } from './StepContent'; -export * from './StepContent'; - -export { default as StepIcon } from './StepIcon'; -export * from './StepIcon'; - -export { default as StepLabel } from './StepLabel'; -export * from './StepLabel'; - -export { default as Stepper } from './Stepper'; -export * from './Stepper'; - -export { default as SvgIcon } from './SvgIcon'; -export * from './SvgIcon'; - -export { default as Switch } from './Switch'; -export * from './Switch'; - -export { default as Tab } from './Tab'; -export * from './Tab'; - -export { default as TabContext } from './TabContext'; -export * from './TabContext'; - -export { default as TabList } from './TabList'; -export * from './TabList'; - -export { default as TabPanel } from './TabPanel'; -export * from './TabPanel'; - -export { default as Tabs } from './Tabs'; -export * from './Tabs'; - -export { default as Tag } from './Tag'; -export * from './Tag'; - -export { default as TextField } from './TextField'; -export * from './TextField'; - -export { default as ThemeProvider } from './ThemeProvider'; -export * from './ThemeProvider'; - -export { default as Toolbar } from './Toolbar'; -export * from './Toolbar'; - -export { default as TopBar_unstable } from './TopBar_unstable'; -export * from './TopBar_unstable'; - -export { default as Typography } from './Typography'; -export * from './Typography'; - -export { default as NavBar } from './NavBar'; -export * from './NavBar'; - -export { default as NavBarButton } from './NavBarButton'; -export * from './NavBarButton'; - -export { default as Unstable_Autocomplete } from './Unstable_Autocomplete'; -export * from './Unstable_Autocomplete'; - -export { default as Unstable_Avatar } from './Unstable_Avatar'; -export * from './Unstable_Avatar'; - -export { default as Unstable_AvatarButton } from './Unstable_AvatarButton'; -export * from './Unstable_AvatarButton'; - -export { default as Unstable_Banner } from './Unstable_Banner'; -export * from './Unstable_Banner'; - -export { default as Unstable_Button } from './Unstable_Button'; -export * from './Unstable_Button'; - -export { default as Unstable_Card } from './Unstable_Card'; -export * from './Unstable_Card'; - -export { default as Unstable_Checkbox } from './Unstable_Checkbox'; -export * from './Unstable_Checkbox'; - -export { default as Unstable_CheckboxField } from './Unstable_CheckboxField'; -export * from './Unstable_CheckboxField'; - -export { default as Unstable_CheckboxListItem } from './Unstable_CheckboxListItem'; -export * from './Unstable_CheckboxListItem'; - -export { default as Unstable_CheckboxMenuItem } from './Unstable_CheckboxMenuItem'; -export * from './Unstable_CheckboxMenuItem'; - -export { default as Unstable_CheckboxGroupField } from './Unstable_CheckboxGroupField'; -export * from './Unstable_CheckboxGroupField'; - -export { default as Unstable_ContentGroup } from './Unstable_ContentGroup'; -export * from './Unstable_ContentGroup'; - -export { default as Unstable_CssBaseline } from './Unstable_CssBaseline'; - -export { default as Unstable_Divider } from './Unstable_Divider'; -export * from './Unstable_Divider'; - -export { default as Unstable_Dropdown } from './Unstable_Dropdown'; -export * from './Unstable_Dropdown'; - -export type { Unstable_DropdownContextValue } from './Unstable_DropdownContext'; - -export { default as Unstable_DropdownMenu } from './Unstable_DropdownMenu'; -export * from './Unstable_DropdownMenu'; - -export { default as Unstable_DropdownTrigger } from './Unstable_DropdownTrigger'; -export * from './Unstable_DropdownTrigger'; - -export { default as Unstable_FontFacesBaseline } from './Unstable_FontFacesBaseline'; - -export { default as Unstable_FormControl } from './Unstable_FormControl'; -export * from './Unstable_FormControl'; - -export { default as Unstable_FormControlLabel } from './Unstable_FormControlLabel'; -export * from './Unstable_FormControlLabel'; - -export { default as Unstable_FormGroup } from './Unstable_FormGroup'; -export * from './Unstable_FormGroup'; - -export { default as Unstable_FormHelperText } from './Unstable_FormHelperText'; -export * from './Unstable_FormHelperText'; - -export { default as Unstable_FormLabel } from './Unstable_FormLabel'; -export * from './Unstable_FormLabel'; - -export { default as Unstable_IconButton } from './Unstable_IconButton'; -export * from './Unstable_IconButton'; - -export { default as Unstable_Input } from './Unstable_Input'; -export * from './Unstable_Input'; - -export { default as Unstable_InputAdornment } from './Unstable_InputAdornment'; -export * from './Unstable_InputAdornment'; - -export { default as Unstable_Link } from './Unstable_Link'; -export * from './Unstable_Link'; - -export { default as Unstable_List } from './Unstable_List'; -export * from './Unstable_List'; - -export { default as Unstable_ListItem } from './Unstable_ListItem'; -export * from './Unstable_ListItem'; - -export { default as Unstable_ListSubheader } from './Unstable_ListSubheader'; -export * from './Unstable_ListSubheader'; - -export { default as Unstable_Menu } from './Unstable_Menu'; -export * from './Unstable_Menu'; - -export { default as Unstable_MenuItem } from './Unstable_MenuItem'; -export * from './Unstable_MenuItem'; - -export { default as Unstable_MenuList } from './Unstable_MenuList'; -export * from './Unstable_MenuList'; - -export { default as Unstable_ModalDialog } from './Unstable_ModalDialog'; -export * from './Unstable_ModalDialog'; - -export { default as Unstable_ModalDialogActions } from './Unstable_ModalDialogActions'; -export * from './Unstable_ModalDialogActions'; - -export { default as Unstable_ModalDialogContent } from './Unstable_ModalDialogContent'; -export * from './Unstable_ModalDialogContent'; - -export { default as Unstable_ModalDialogContentText } from './Unstable_ModalDialogContentText'; -export * from './Unstable_ModalDialogContentText'; - -export { default as Unstable_ModalDialogTitle } from './Unstable_ModalDialogTitle'; -export * from './Unstable_ModalDialogTitle'; - -export { default as Unstable_Paper } from './Unstable_Paper'; -export * from './Unstable_Paper'; - -export { default as Unstable_Radio } from './Unstable_Radio'; -export * from './Unstable_Radio'; - -export { default as Unstable_RadioField } from './Unstable_RadioField'; -export * from './Unstable_RadioField'; - -export { default as Unstable_RadioGroup } from './Unstable_RadioGroup'; -export * from './Unstable_RadioGroup'; - -export type { Unstable_RadioGroupExtraContextValue } from './Unstable_RadioGroupExtraContext'; - -export { default as Unstable_RadioGroupField } from './Unstable_RadioGroupField'; -export * from './Unstable_RadioGroupField'; - -export { default as Unstable_SectionMessage } from './Unstable_SectionMessage'; -export * from './Unstable_SectionMessage'; - -export { default as Unstable_Select } from './Unstable_Select'; -export * from './Unstable_Select'; - -export { default as Unstable_SvgIcon } from './Unstable_SvgIcon'; -export * from './Unstable_SvgIcon'; - -export { default as Unstable_Switch } from './Unstable_Switch'; -export * from './Unstable_Switch'; - -export { default as Unstable_SwitchField } from './Unstable_SwitchField'; -export * from './Unstable_SwitchField'; - -export { default as Unstable_Tab } from './Unstable_Tab'; -export * from './Unstable_Tab'; - -export { default as Unstable_TabPanel } from './Unstable_TabPanel'; -export * from './Unstable_TabPanel'; - -export { default as Unstable_Tabs } from './Unstable_Tabs'; -export * from './Unstable_Tabs'; - -export type { Unstable_TabsContextValue } from './Unstable_TabsContext'; - -export { default as Unstable_TabsList } from './Unstable_TabsList'; -export * from './Unstable_TabsList'; - -export { default as Unstable_Tag } from './Unstable_Tag'; -export * from './Unstable_Tag'; - -export { default as Unstable_Toast } from './Unstable_Toast'; -export * from './Unstable_Toast'; - -export type { Unstable_ToastsContextValue } from './Unstable_ToastsContext'; - -export { default as Unstable_ToastsProvider } from './Unstable_ToastsProvider'; -export * from './Unstable_ToastsProvider'; - -export { default as Unstable_Tooltip } from './Unstable_Tooltip'; -export * from './Unstable_Tooltip'; - -export { default as Unstable_TextField } from './Unstable_TextField'; -export * from './Unstable_TextField'; - -export { default as Unstable_Typography } from './Unstable_Typography'; -export * from './Unstable_Typography'; - -export { default as createSvgIcon_unstable } from './createSvgIcon_unstable'; - -export { default as makeStyles } from './makeStyles'; - -export { default as styled } from './styled'; -export * from './styled'; - -export { default as theme } from './theme'; -export * from './theme'; - -export { default as unstable_createSvgIcon } from './unstable_createSvgIcon'; - -export { default as useAutocomplete_unstable } from './useAutocomplete_unstable'; - -export { default as useDropdown_unstable } from './useDropdown_unstable'; - -export { default as useFormControl } from './useFormControl'; - -export { default as useMediaQuery } from './useMediaQuery'; - -export { default as useMediaQuery_unstable } from './useMediaQuery_unstable'; - -export { default as useRadioGroupExtra_unstable } from './useRadioGroupExtra_unstable'; - -export { default as useSideBar_unstable } from './useSideBar_unstable'; - -export { default as useSideBarTrigger_unstable } from './useSideBarTrigger_unstable'; - -export { default as useTabs_unstable } from './useTabs_unstable'; - -export { default as useTheme } from './useTheme'; - -export { default as useTheme_unstable } from './useTheme_unstable'; - -export { default as useToasts_unstable } from './useToasts_unstable'; - -export { default as withStyles } from './withStyles'; -export * from './withStyles'; diff --git a/libs/spark/src/internal/AlertOctagonFilled.tsx b/libs/spark/src/internal/AlertOctagonFilled.tsx deleted file mode 100644 index 22edbf890..000000000 --- a/libs/spark/src/internal/AlertOctagonFilled.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'AlertOctagonFilled' -); diff --git a/libs/spark/src/internal/AlertThick.tsx b/libs/spark/src/internal/AlertThick.tsx deleted file mode 100644 index c86021470..000000000 --- a/libs/spark/src/internal/AlertThick.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'AlertThick' -); diff --git a/libs/spark/src/internal/AlertTriangleFilled.tsx b/libs/spark/src/internal/AlertTriangleFilled.tsx deleted file mode 100644 index f560fea13..000000000 --- a/libs/spark/src/internal/AlertTriangleFilled.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'AlertTriangleFilled' -); diff --git a/libs/spark/src/internal/ArrowRight.tsx b/libs/spark/src/internal/ArrowRight.tsx deleted file mode 100644 index 5f10322a3..000000000 --- a/libs/spark/src/internal/ArrowRight.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'ArrowRight' -); diff --git a/libs/spark/src/internal/CheckCircleFilled.tsx b/libs/spark/src/internal/CheckCircleFilled.tsx deleted file mode 100644 index 504922079..000000000 --- a/libs/spark/src/internal/CheckCircleFilled.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'CheckCircleFilled' -); diff --git a/libs/spark/src/internal/CheckThick.tsx b/libs/spark/src/internal/CheckThick.tsx deleted file mode 100644 index 0a0f5fa62..000000000 --- a/libs/spark/src/internal/CheckThick.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'CheckThick' -); diff --git a/libs/spark/src/internal/ChevronDown.tsx b/libs/spark/src/internal/ChevronDown.tsx deleted file mode 100644 index da6bc5944..000000000 --- a/libs/spark/src/internal/ChevronDown.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'ChevronDown' -); diff --git a/libs/spark/src/internal/ChevronRight.tsx b/libs/spark/src/internal/ChevronRight.tsx deleted file mode 100644 index e3c3c5127..000000000 --- a/libs/spark/src/internal/ChevronRight.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'ChevronRight' -); diff --git a/libs/spark/src/internal/Cross.tsx b/libs/spark/src/internal/Cross.tsx deleted file mode 100644 index 2b3773a7f..000000000 --- a/libs/spark/src/internal/Cross.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'Cross' -); diff --git a/libs/spark/src/internal/CrossSmall.tsx b/libs/spark/src/internal/CrossSmall.tsx deleted file mode 100644 index d8aeee880..000000000 --- a/libs/spark/src/internal/CrossSmall.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'Cross', - '0 0 16 16' -); diff --git a/libs/spark/src/internal/InfoFilled.tsx b/libs/spark/src/internal/InfoFilled.tsx deleted file mode 100644 index 1ad751ea0..000000000 --- a/libs/spark/src/internal/InfoFilled.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from '../utils/createSvgIcon'; - -export default createSvgIcon( - , - 'InfoFilled' -); diff --git a/libs/spark/src/internal/index.ts b/libs/spark/src/internal/index.ts deleted file mode 100644 index 9a49b15c1..000000000 --- a/libs/spark/src/internal/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -export { default as AlertOctagonFilled } from './AlertOctagonFilled'; -export { default as AlertThick } from './AlertThick'; -export { default as AlertTriangleFilled } from './AlertTriangleFilled'; -export { default as ArrowRight } from './ArrowRight'; -export { default as CheckCircleFilled } from './CheckCircleFilled'; -export { default as CheckThick } from './CheckThick'; -export { default as ChevronDown } from './ChevronDown'; -export { default as ChevronRight } from './ChevronRight'; -export { default as Cross } from './Cross'; -export { default as CrossSmall } from './CrossSmall'; -export { default as InfoFilled } from './InfoFilled'; diff --git a/libs/spark/src/makeStyles/index.ts b/libs/spark/src/makeStyles/index.ts deleted file mode 100644 index 310cb6e47..000000000 --- a/libs/spark/src/makeStyles/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './makeStyles'; diff --git a/libs/spark/src/makeStyles/makeStyles.spec.tsx b/libs/spark/src/makeStyles/makeStyles.spec.tsx deleted file mode 100644 index ae77b2419..000000000 --- a/libs/spark/src/makeStyles/makeStyles.spec.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { stub } from 'sinon'; -import makeStyles from './makeStyles'; -import initialTheme from '../theme/initialTheme'; - -describe('styled', () => { - it("should supply Spark's theme by default", () => { - const styles = stub().returns({ root: {} }); - - const useStyles = makeStyles(styles); - const StyledComponent = () => { - const classes = useStyles(); - return
    ; - }; - - render(); - - expect(styles.args[0][0]).toEqual(initialTheme); - }); -}); diff --git a/libs/spark/src/makeStyles/makeStyles.ts b/libs/spark/src/makeStyles/makeStyles.ts deleted file mode 100644 index d4973f029..000000000 --- a/libs/spark/src/makeStyles/makeStyles.ts +++ /dev/null @@ -1,22 +0,0 @@ -import muiMakeStyles from '@material-ui/core/styles/makeStyles'; -import type { DefaultTheme } from '../theme'; -import initialTheme from '../theme/initialTheme'; -import type { ClassNameMap, Styles, WithStylesOptions } from '../withStyles'; - -export default function makeStyles< - ClassKey extends string = string, - // eslint-disable-next-line @typescript-eslint/ban-types - Props extends object = {}, - Theme = DefaultTheme ->( - styles: Styles, - options?: Omit, 'withTheme'> -): keyof Props extends never - ? // eslint-disable-next-line @typescript-eslint/no-explicit-any - (props?: any) => ClassNameMap - : (props: Props) => ClassNameMap { - return muiMakeStyles(styles, { - defaultTheme: initialTheme, - ...options, - }); -} diff --git a/libs/spark/src/styled/index.ts b/libs/spark/src/styled/index.ts deleted file mode 100644 index 76e6383b4..000000000 --- a/libs/spark/src/styled/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './styled'; -export * from './styled'; diff --git a/libs/spark/src/styled/styled.spec.tsx b/libs/spark/src/styled/styled.spec.tsx deleted file mode 100644 index c7be4fefd..000000000 --- a/libs/spark/src/styled/styled.spec.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { stub } from 'sinon'; -import styled from './styled'; -import initialTheme from '../theme/initialTheme'; - -describe('styled', () => { - const Empty = () =>
    ; - - it("should supply Spark's theme by default", () => { - const styles = stub().returns({}); - const StyledComponent = styled(Empty)(styles); - - render(); - - expect(styles.args[0][0].theme).toEqual(initialTheme); - }); -}); diff --git a/libs/spark/src/styled/styled.ts b/libs/spark/src/styled/styled.ts deleted file mode 100644 index 9193a120a..000000000 --- a/libs/spark/src/styled/styled.ts +++ /dev/null @@ -1,48 +0,0 @@ -import type { ComponentProps, ComponentType, ElementType } from 'react'; -import type { StyledProps } from '@material-ui/core/styles/styled'; -import { default as muiStyled } from '@material-ui/core/styles/styled'; -import type { - CreateCSSProperties, - StyledComponentProps, - WithStylesOptions, -} from '../withStyles'; -import type { DefaultTheme } from '../theme'; -import initialTheme from '../theme/initialTheme'; - -export type { StyledProps }; - -export type ComponentCreator = < - Theme = DefaultTheme, - // eslint-disable-next-line @typescript-eslint/ban-types - Props extends {} = {} ->( - styles: - | CreateCSSProperties - | ((props: { theme: Theme } & Props) => CreateCSSProperties), - options?: WithStylesOptions -) => ComponentType< - Omit< - JSX.LibraryManagedAttributes>, - 'classes' | 'className' - > & - StyledComponentProps<'root'> & { className?: string } & (Props extends { - theme: Theme; - } - ? Omit & { theme?: Theme } - : Props) ->; - -const styled = ( - Component: Component -): ComponentCreator => { - const componentCreator = muiStyled(Component); - - return (styles, options) => - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore Unintelligable "Type ... is not assignable to type ..." cascade during Storybook compilation - componentCreator(styles, { - defaultTheme: initialTheme, - ...options, - }); -}; -export default styled; diff --git a/libs/spark/src/theme/fontFaces.ts b/libs/spark/src/theme/fontFaces.ts deleted file mode 100644 index 3ca634be9..000000000 --- a/libs/spark/src/theme/fontFaces.ts +++ /dev/null @@ -1,87 +0,0 @@ -import type * as CSS from 'csstype'; - -const nunitoRegular: CSS.AtRule.FontFace = { - fontFamily: '"Nunito"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 400, - src: 'url(/fonts/nunito-regular-webfont.woff2) format("woff2")', -}; - -const nunitoItalic: CSS.AtRule.FontFace = { - fontFamily: '"Nunito"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 400, - src: 'url(/fonts/nunito-italic-webfont.woff2) format("woff2")', -}; - -const nunitoSemibold: CSS.AtRule.FontFace = { - fontFamily: '"Nunito"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 600, - src: 'url(/fonts/nunito-semibold-webfont.woff2) format("woff2")', -}; - -const nunitoSemiboldItalic: CSS.AtRule.FontFace = { - fontFamily: '"Nunito"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 600, - src: 'url(/fonts/nunito-semibolditalic-webfont.woff2) format("woff2")', -}; - -const nunitoBoldItalic: CSS.AtRule.FontFace = { - fontFamily: '"Nunito"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 700, - src: 'url(/fonts/nunito-bolditalic-webfont.woff2) format("woff2")', -}; - -const nunitoBold: CSS.AtRule.FontFace = { - fontFamily: '"Nunito"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 700, - src: 'url(/fonts/nunito-bold-webfont.woff2) format("woff2")', -}; - -const nunitoExtraboldItalic: CSS.AtRule.FontFace = { - fontFamily: '"Nunito"', - fontStyle: 'italic', - fontDisplay: 'swap', - fontWeight: 800, - src: 'url(/fonts/nunito-extrabolditalic-webfont.woff2) format("woff2")', -}; - -const nunitoExtrabold: CSS.AtRule.FontFace = { - fontFamily: '"Nunito"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 800, - src: 'url(/fonts/nunito-extrabold-webfont.woff2) format("woff2")', -}; - -const sourceCodeProRegular: CSS.AtRule.FontFace = { - fontFamily: '"Source Code Pro"', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 500, - src: 'url(/fonts/sourcecodepro-medium-webfont.woff2) format("woff2")', -}; - -const fontFaces: Array = [ - nunitoRegular, - nunitoItalic, - nunitoBold, - nunitoBoldItalic, - nunitoExtrabold, - nunitoExtraboldItalic, - nunitoSemibold, - nunitoSemiboldItalic, - sourceCodeProRegular, -]; - -export default fontFaces; diff --git a/libs/spark/src/theme/index.ts b/libs/spark/src/theme/index.ts deleted file mode 100644 index e4d2cdf1d..000000000 --- a/libs/spark/src/theme/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './theme'; -export * from './theme'; diff --git a/libs/spark/src/theme/initialTheme.ts b/libs/spark/src/theme/initialTheme.ts deleted file mode 100644 index 0a021419a..000000000 --- a/libs/spark/src/theme/initialTheme.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { default as createTheme } from '@material-ui/core/styles/createTheme'; -import palette from './palette'; -import shadows from './shadows'; -import typography from './typography'; -import borders_alpha from '../alpha/theme/borders'; -import palette_alpha from '../alpha/theme/palette'; -import radii_alpha from '../alpha/theme/radii'; -import shadows_alpha from '../alpha/theme/shadows'; -import typography_alpha from '../alpha/theme/typography'; - -const initialTheme = createTheme({ - palette, - shadows, - typography, -}); - -initialTheme.unstable_borders = borders_alpha; -initialTheme.borders_alpha = borders_alpha; -initialTheme.unstable_palette = palette_alpha; -initialTheme.palette_alpha = palette_alpha; -initialTheme.unstable_radii = radii_alpha; -initialTheme.radii_alpha = radii_alpha; -initialTheme.unstable_shadows = shadows_alpha; -initialTheme.shadows_alpha = shadows_alpha; -initialTheme.unstable_typography = typography_alpha; -initialTheme.typography_alpha = typography_alpha; - -export default initialTheme; diff --git a/libs/spark/src/theme/overrides.ts b/libs/spark/src/theme/overrides.ts deleted file mode 100644 index 7227b86d3..000000000 --- a/libs/spark/src/theme/overrides.ts +++ /dev/null @@ -1,70 +0,0 @@ -import type {} from '@material-ui/lab/themeAugmentation'; -import type { Theme } from '@material-ui/core'; -import type { Overrides } from '@material-ui/core/styles/overrides'; -import { MuiAutocompleteStyleOverrides } from '../Autocomplete/defaults'; -import { MuiButtonStyleOverrides } from '../Button/defaults'; -import { MuiCardStyleOverrides } from '../Card/defaults'; -import { MuiCardActionsStyleOverrides } from '../CardActions/defaults'; -import { MuiCardContentStyleOverrides } from '../CardContent/defaults'; -import { MuiCheckboxStyleOverrides } from '../Checkbox/defaults'; -import { MuiDividerStyleOverrides } from '../Divider/defaults'; -import { MuiFormControlLabelStyleOverrides } from '../FormControlLabel/defaults'; -import { MuiFormHelperTextStyleOverrides } from '../FormHelperText/defaults'; -import { MuiFormLabelStyleOverrides } from '../FormLabel/defaults'; -import { MuiInputStyleOverrides } from '../Input/defaults'; -import { MuiInputAdornmentStylesOverrides } from '../InputAdornment/defaults'; -import { MuiInputBaseStyleOverrides } from '../InputBase/defaults'; -import { MuiInputLabelStyleOverrides } from '../InputLabel/defaults'; -import { MuiListStyleOverrides } from '../List/defaults'; -import { MuiListItemStyleOverrides } from '../ListItem/defaults'; -import { MuiListItemAvatarStyleOverrides } from '../ListItemAvatar/defaults'; -import { MuiListItemIconStyleOverrides } from '../ListItemIcon/defaults'; -import { MuiListItemSecondaryActionStyleOverrides } from '../ListItemSecondaryAction/defaults'; -import { MuiListItemTextStyleOverrides } from '../ListItemText/defaults'; -import { MuiListSubheaderStyleOverrides } from '../ListSubheader/defaults'; -import { MuiMenuStyleOverrides } from '../Menu/defaults'; -import { MuiMenuItemStyleOverrides } from '../MenuItem/defaults'; -import { MuiPaginationStyleOverrides } from '../Pagination/defaults'; -import { MuiPaginationItemStyleOverrides } from '../PaginationItem/defaults'; -import { MuiRadioStyleOverrides } from '../Radio/defaults'; -import { MuiSelectStylesOverrides } from '../Select/defaults'; -import { MuiSwitchStyleOverrides } from '../Switch/defaults'; -import { MuiTabStyleOverrides } from '../Tab/defaults'; -import { MuiTabsStyleOverrides } from '../Tabs/defaults'; -import { MuiTabPanelStyleOverrides } from '../TabPanel/defaults'; - -const overrides = (theme: Theme): Overrides => ({ - MuiAutocomplete: MuiAutocompleteStyleOverrides(theme), - MuiButton: MuiButtonStyleOverrides(theme), - MuiCard: MuiCardStyleOverrides, - MuiCardContent: MuiCardContentStyleOverrides, - MuiCardActions: MuiCardActionsStyleOverrides, - MuiCheckbox: MuiCheckboxStyleOverrides(theme), - MuiDivider: MuiDividerStyleOverrides(theme), - MuiFormControlLabel: MuiFormControlLabelStyleOverrides(theme), - MuiFormHelperText: MuiFormHelperTextStyleOverrides(theme), - MuiFormLabel: MuiFormLabelStyleOverrides(theme), - MuiInput: MuiInputStyleOverrides, - MuiInputAdornment: MuiInputAdornmentStylesOverrides(theme), - MuiInputBase: MuiInputBaseStyleOverrides(theme), - MuiInputLabel: MuiInputLabelStyleOverrides(theme), - MuiList: MuiListStyleOverrides, - MuiListItem: MuiListItemStyleOverrides(theme), - MuiListItemAvatar: MuiListItemAvatarStyleOverrides, - MuiListItemIcon: MuiListItemIconStyleOverrides(theme), - MuiListItemText: MuiListItemTextStyleOverrides(theme), - MuiListItemSecondaryAction: MuiListItemSecondaryActionStyleOverrides, - MuiListSubheader: MuiListSubheaderStyleOverrides(theme), - MuiMenu: MuiMenuStyleOverrides(theme), - MuiMenuItem: MuiMenuItemStyleOverrides(theme), - MuiPagination: MuiPaginationStyleOverrides, - MuiPaginationItem: MuiPaginationItemStyleOverrides(theme), - MuiRadio: MuiRadioStyleOverrides(theme), - MuiSelect: MuiSelectStylesOverrides(theme), - MuiSwitch: MuiSwitchStyleOverrides(theme), - MuiTab: MuiTabStyleOverrides(theme), - MuiTabPanel: MuiTabPanelStyleOverrides, - MuiTabs: MuiTabsStyleOverrides(theme), -}); - -export default overrides; diff --git a/libs/spark/src/theme/palette.ts b/libs/spark/src/theme/palette.ts deleted file mode 100644 index bf383a978..000000000 --- a/libs/spark/src/theme/palette.ts +++ /dev/null @@ -1,129 +0,0 @@ -// Palette properties with repeatedly used values are extracted -const red = { - 1: '#f7d2da', - 2: '#de5160', - 3: '#b83345', - 4: '#851b2c', - 5: '#520a18', -}; - -const orange = { - 1: '#ffb78f', - 2: '#ff7f4d', - 3: '#e0662d', - 4: '#a34814', - 5: '#5c2704', -}; - -const yellow = { - 1: '#fae6b2', - 2: '#f7d054', - 3: '#dbb13d', - 4: '#8f691d', - 5: '#4c3109', -}; - -const green = { - 1: '#b8f0d4', - 2: '#4aa784', - 3: '#2e7f64', - 4: '#0c664e', - 5: '#084237', -}; - -const blue = { - 1: '#d7f3ff', - 2: '#498dcc', - 3: '#2967a6', - 4: '#0a4872', - 5: '#072e44', // Also "Neutral Navy" in Figma -}; - -const purple = { - 1: '#d9d8fb', - 2: '#8070f6', - 3: '#6951e0', - 4: '#452ea3', - 5: '#271466', -}; - -const brand = { - blue: blue[4], - lightBlue: blue[1], - orange: '#f34700', - peach: orange[1], -}; - -const grey = { - lighter: '#f5f5f5' as const, // "Neutral Lighter Grey" in Figma - light: '#f0f1f2' as const, // "Neutral Light Grey" in Figma - medium: '#e1e3e5' as const, // "Neutral Medium Grey" in Figma - dark: '#d2d4d6' as const, // "Neutral Dark Grey" in Figma -}; - -const text = { - light: grey.light, - lightLowContrast: `${grey.light}b8`, // 72% opacity - dark: blue[5], - darkLowContrast: `${blue[5]}b8`, // 72% opacity -}; - -// Only customizations are specified, view all other default theme.palette properties -// at https://v4.mui.com/customization/default-theme/?expand-path=$.palette -const palette = { - // Mui default properties, only customizations specified - error: { - main: red[3], - contrastText: text.light, - }, - warning: { - main: yellow[2], - contrastText: text.dark, - }, - // "Primary Action" in Figma - info: { - main: blue[3], - contrastText: text.light, - }, - success: { - main: green[3], - contrastText: text.light, - }, - grey, - text, - background: { - navy: blue[5], - blue: brand.blue, - lightGrey: grey.light, - lightBlue: brand.lightBlue, - }, - // custom properties - brand, - red, - orange, - yellow, - green, - blue, - purple, -}; - -export default palette; - -// *************** -// *** TYPES *** -// *************** - -export interface PaletteTertiaryColor { - 1: string; - 2: string; - 3: string; - 4: string; - 5: string; -} - -export interface TypeBrand { - blue: string; - lightBlue: string; - orange: string; - peach: string; -} diff --git a/libs/spark/src/theme/props.ts b/libs/spark/src/theme/props.ts deleted file mode 100644 index b8a7c2f4c..000000000 --- a/libs/spark/src/theme/props.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { ComponentsProps } from '@material-ui/core/styles/props'; -import { MuiAutocompleteDefaultProps } from '../Autocomplete/defaults'; -import { MuiAlertDefaultProps } from '../Alert/defaults'; -import { MuiButtonDefaultProps } from '../Button/defaults'; -import { MuiButtonBaseDefaultProps } from '../ButtonBase/defaults'; -import { MuiCardDefaultProps } from '../Card/defaults'; -import { MuiCheckboxDefaultProps } from '../Checkbox/defaults'; -import { MuiIconButtonDefaultProps } from '../IconButton/defaults'; -import { MuiInputDefaultProps } from '../Input/defaults'; -import { MuiInputLabelDefaultProps } from '../InputLabel/defaults'; -import { MuiMenuDefaultProps } from '../Menu/defaults'; -import { MuiPaginationDefaultProps } from '../Pagination/defaults'; -import { MuiPaginationItemDefaultProps } from '../PaginationItem/defaults'; -import { MuiRadioDefaultProps } from '../Radio/defaults'; -import { MuiSelectDefaultProps } from '../Select/defaults'; -import { MuiTabsDefaultProps } from '../Tabs/defaults'; - -export default { - MuiAlert: MuiAlertDefaultProps, - MuiAutocomplete: MuiAutocompleteDefaultProps, - MuiButton: MuiButtonDefaultProps, - MuiButtonBase: MuiButtonBaseDefaultProps, - MuiCard: MuiCardDefaultProps, - MuiCheckbox: MuiCheckboxDefaultProps, - MuiIconButton: MuiIconButtonDefaultProps, - MuiInput: MuiInputDefaultProps, - MuiInputLabel: MuiInputLabelDefaultProps, - MuiMenu: MuiMenuDefaultProps, - MuiPagination: MuiPaginationDefaultProps, - MuiPaginationItem: MuiPaginationItemDefaultProps, - MuiRadio: MuiRadioDefaultProps, - MuiSelect: MuiSelectDefaultProps, - MuiTabs: MuiTabsDefaultProps, -} as ComponentsProps; diff --git a/libs/spark/src/theme/shadows.ts b/libs/spark/src/theme/shadows.ts deleted file mode 100644 index 58acc7695..000000000 --- a/libs/spark/src/theme/shadows.ts +++ /dev/null @@ -1,54 +0,0 @@ -import type { Shadows } from '@material-ui/core/styles/shadows'; - -/** - * Generate Spark Design elevation shadows, a series of two box shadows. First - * shadow appears like a light border. Second shadow is a "key light" shadow, - * adjusted to given input. - * (Inspired by an internal Mui utility.) - * @param {number} yOffset of key light shadow, in pixels. - * @param {number} blurRadius of key light shadow, in pixels. - * @param {number} transparency of key light shadow color, from 0 to 1. - * @returns {string} comma-separated box-shadow values. - */ -function createElevationShadow( - yOffset: number, - blurRadius: number, - transparency: number -) { - return [ - '0 0 1px 0 rgba(7, 46, 68, 0.31)', - `0 ${yOffset}px ${blurRadius}px rgba(7, 46, 68, ${transparency})`, - ].join(', '); -} - -const highestElevationShadow = createElevationShadow(18, 28, 0.15); - -const shadows: Shadows = [ - 'none', - createElevationShadow(1, 1, 0.24), // E100 - createElevationShadow(3, 5, 0.2), // E200 - createElevationShadow(8, 12, 0.15), // E300 - createElevationShadow(10, 18, 0.15), // E400 - highestElevationShadow, // E500 - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, - highestElevationShadow, -]; - -export default shadows; diff --git a/libs/spark/src/theme/theme.ts b/libs/spark/src/theme/theme.ts deleted file mode 100644 index edb14c53a..000000000 --- a/libs/spark/src/theme/theme.ts +++ /dev/null @@ -1,55 +0,0 @@ -import type { Theme as MuiTheme } from '@material-ui/core/styles'; -import { createTheme } from '@material-ui/core/styles'; -import initialTheme from './initialTheme'; -import overrides from './overrides'; -import props from './props'; -import type {} from './themeAugmentation'; -import type { Borders as Borders_alpha } from '../alpha/theme/borders'; -import borders_alpha from '../alpha/theme/borders'; -import type { Palette as Palette_alpha } from '../alpha/theme/palette'; -import palette_alpha from '../alpha/theme/palette'; -import type { Radii as Radii_alpha } from '../alpha/theme/radii'; -import radii_alpha from '../alpha/theme/radii'; -import type { Shadows as Shadows_alpha } from '../alpha/theme/shadows'; -import shadows_alpha from '../alpha/theme/shadows'; -import type { TypographyOptions as TypographyOptions_alpha } from '../alpha/theme/typography'; -import typography_alpha from '../alpha/theme/typography'; -export interface Theme extends MuiTheme { - borders_alpha: Borders_alpha; - palette_alpha: Palette_alpha; - radii_alpha: Radii_alpha; - shadows_alpha: Shadows_alpha; - typography_alpha: TypographyOptions_alpha; - /** @deprecated use borders_alpha */ - unstable_borders: Borders_alpha; - /** @deprecated use `palette_alpha` */ - unstable_palette: Palette_alpha; - /** @deprecated use `radii_alpha` */ - unstable_radii: Radii_alpha; - /** @deprecated use `shadows_alpha` */ - unstable_shadows: Shadows_alpha; - /** @deprecated use `typography_alpha` */ - unstable_typography: TypographyOptions_alpha; -} - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface DefaultTheme extends Theme {} - -const theme = createTheme({ - ...initialTheme, - props, - overrides: overrides(initialTheme), -}); - -theme.unstable_borders = borders_alpha; -theme.borders_alpha = borders_alpha; -theme.unstable_palette = palette_alpha; -theme.palette_alpha = palette_alpha; -theme.unstable_radii = radii_alpha; -theme.radii_alpha = radii_alpha; -theme.unstable_shadows = shadows_alpha; -theme.shadows_alpha = shadows_alpha; -theme.unstable_typography = typography_alpha; -theme.typography_alpha = typography_alpha; - -export default theme; diff --git a/libs/spark/src/theme/themeAugmentation.ts b/libs/spark/src/theme/themeAugmentation.ts deleted file mode 100644 index 621aeed5b..000000000 --- a/libs/spark/src/theme/themeAugmentation.ts +++ /dev/null @@ -1,205 +0,0 @@ -import type { - TypographyUtils, - TypographyStyle, - TypographyStyleOptions, - FontStyleOptions, -} from '@material-ui/core/styles/createTypography'; -import type { AvatarClassKey } from '../Avatar'; -import type { BannerClassKey } from '../Banner'; -import type { IconButtonClassKey } from '../IconButton'; -import type { SectionMessageClassKey } from '../SectionMessage'; -import type { SectionMessageTitleClassKey } from '../SectionMessageTitle'; -import type { TagClassKey } from '../Tag'; -import type { TypographyClassKey } from '../Typography'; -import type { PaletteTertiaryColor, TypeBrand } from './palette'; -import type { Theme } from './theme'; -import type { SparkVariant } from './typography'; -import type { Borders as Borders_alpha } from '../alpha/theme/borders'; -import type { Palette as Palette_alpha } from '../alpha/theme/palette'; -import type { Radii as Radii_alpha } from '../alpha/theme/radii'; -import type { Shadows as Shadows_alpha } from '../alpha/theme/shadows'; -import type { TypographyOptions as TypographyOptions_alpha } from '../alpha/theme/typography'; - -// Augment global interfaces so consumers TS can recognize the customizations - -// Note: when augmenting, only need to declare custom properties; overriding or re-declaring will throw. - -declare module '@material-ui/core/styles/createTheme' { - interface Theme { - borders_alpha: Borders_alpha; - palette_alpha: Palette_alpha; - radii_alpha: Radii_alpha; - shadows_alpha: Shadows_alpha; - typography_alpha: TypographyOptions_alpha; - /** @deprecated */ - unstable_borders: Borders_alpha; - /** @deprecated */ - unstable_palette: Palette_alpha; - /** @deprecated */ - unstable_radii: Radii_alpha; - /** @deprecated */ - unstable_shadows: Shadows_alpha; - /** @deprecated */ - unstable_typography: TypographyOptions_alpha; - } -} - -declare module '@material-ui/styles/defaultTheme' { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface DefaultTheme extends Theme { - borders_alpha: Borders_alpha; - palette_alpha: Palette_alpha; - radii_alpha: Radii_alpha; - shadows_alpha: Shadows_alpha; - typography_alpha: TypographyOptions_alpha; - /** @deprecated */ - unstable_borders: Borders_alpha; - /** @deprecated */ - unstable_palette: Palette_alpha; - /** @deprecated */ - unstable_radii: Radii_alpha; - /** @deprecated */ - unstable_shadows: Shadows_alpha; - /** @deprecated */ - unstable_typography: TypographyOptions_alpha; - } -} - -declare module '@material-ui/core/styles/createPalette' { - // :unstable_: use when stable - // interface TypeText { - // heading: string; - // body: string; - // subdued: string; - // // disabled exists - // // icon exists - // secondaryIcon: string; - // inverseHeading: string; - // inverseBody: string; - // inverseSubdued: string; - // inverseDisabled: string; - // inverseIcon: string; - // inverseSecondaryIcon: string; - // } - // interface TypeBackground { - // default: string; - // alternative: string; - // brand: string; - // inverse: string; - // } - // interface TypeAction { - // focusBoxShadow: CSS.Property.BoxShadow; - // } - // interface Palette { - // text: TypeText; - // background: TypeBackground; - // brand: TypeBrand; - // red: Color; - // yellow: Color; - // green: Color; - // blue: Color; - // purple: Color; - // teal: Color; - // magenta: Color; - // } - // interface PaletteOptions { - // text: TypeText; - // background: TypeBackground; - // brand: TypeBrand; - // red: Color; - // yellow: Color; - // green: Color; - // blue: Color; - // purple: Color; - // teal: Color; - // magenta: Color; - // } - - interface TypeText { - dark: string; - darkLowContrast: string; - light: string; - lightLowContrast: string; - } - - interface TypeBackground { - navy: string; - blue: string; - lightGrey: string; - lightBlue: string; - } - - interface Palette { - text: TypeText; - background: TypeBackground; - brand: TypeBrand; - red: PaletteTertiaryColor; - orange: PaletteTertiaryColor; - yellow: PaletteTertiaryColor; - green: PaletteTertiaryColor; - blue: PaletteTertiaryColor; - purple: PaletteTertiaryColor; - } - - interface PaletteOptions { - brand: TypeBrand; - red: PaletteTertiaryColor; - orange: PaletteTertiaryColor; - yellow: PaletteTertiaryColor; - green: PaletteTertiaryColor; - blue: PaletteTertiaryColor; - purple: PaletteTertiaryColor; - } -} - -declare module '@material-ui/core/index' { - // Only need to declare custom properties here; extending will throw - interface Color { - lighter: string; - light: string; - medium: string; - dark: string; - } -} - -declare module '@material-ui/core/styles/overrides' { - interface ComponentNameToClassKey { - MuiSparkAvatar: AvatarClassKey; - MuiSparkBanner: BannerClassKey; - MuiSparkIconButton: IconButtonClassKey; - MuiSparkSectionMessage: SectionMessageClassKey; - MuiSparkSectionTitleMessage: SectionMessageTitleClassKey; - MuiSparkTag: TagClassKey; - MuiSparkTypography: TypographyClassKey; - } -} - -// Augment global interface at top level -declare module '@material-ui/core/index' { - // :unstable_: replace `SparkVariant` with `unstable_TypographyVariant` - /* eslint-disable-next-line @typescript-eslint/no-empty-interface */ - interface TypographyOptions - extends TypographyUtils, - Partial< - Record & FontStyleOptions - > {} - - // :unstable_: replace `SparkVariant` with `unstable_TypographyVariant` - /* eslint-disable-next-line @typescript-eslint/no-empty-interface */ - interface Typography extends Record {} -} - -// Augment global interface at source -- affects Theme interface -declare module '@material-ui/core/styles/createTypography' { - // :unstable_: replace `SparkVariant` with `unstable_TypographyVariant` - /* eslint-disable-next-line @typescript-eslint/no-empty-interface */ - interface TypographyOptions - extends TypographyUtils, - Partial< - Record & FontStyleOptions - > {} - - // :unstable_: replace `SparkVariant` with `unstable_TypographyVariant` - /* eslint-disable-next-line @typescript-eslint/no-empty-interface */ - interface Typography extends Record {} -} diff --git a/libs/spark/src/theme/typography.ts b/libs/spark/src/theme/typography.ts deleted file mode 100644 index f73c1d619..000000000 --- a/libs/spark/src/theme/typography.ts +++ /dev/null @@ -1,132 +0,0 @@ -import type { - TypographyOptions, - TypographyUtils, - TypographyStyle, - TypographyStyleOptions, - FontStyleOptions, -} from '@material-ui/core/styles/createTypography'; - -export type SparkVariant = - | 'display-lg' - | 'display-md' - | 'display-sm' - | 'heading-xl' - | 'heading-lg' - | 'heading-md' - | 'heading-sm' - | 'uppercase-lg' - | 'uppercase-md' - | 'uppercase-sm' - | 'label-xl' - | 'label-xl-strong' - | 'label-lg' - | 'label-lg-strong' - | 'label-md' - | 'label-md-strong' - | 'label-sm' - | 'label-sm-strong' - | 'paragraph-xl' - | 'paragraph-lg' - | 'paragraph-md' - | 'paragraph-sm' - | 'code-lg' - | 'code-md' - | 'code-sm'; - -interface SparkTypographyOptions - extends TypographyOptions, - TypographyUtils, - Partial & FontStyleOptions> {} - -const defaultFontFamily = '"Nunito", Avenir, sans-serif'; -const codeFontFamily = - '"Source Code Pro", Consolas, "Andale Mono WT", "Lucida Console", Courier, monospace'; -const defaultFontSize = 16; -const pxToRem = (px: number) => `${px / defaultFontSize}rem`; - -/** - * Generate Prenda Design System (PDS) (formerly Spark Design System) typography variants. - * (Inspired by an internal Mui utility.) - * @param {number} fontWeight numeric value (400, 600, 700, etc.). - * @param {number} fontSize numeric value in pixel units - * @param {number} lineHeight numeric value in pixel units - * @param {number} [letterSpacing] numeric value in em units. - * @param {('uppercase' | 'none')} [textTransform] - * @param {string} [fontFamily] - * @param {string} [fontFeatureSettings] - * @returns {object} - */ -export function buildVariant( - fontWeight: number, - fontSize: number, - lineHeight: number, - letterSpacing: number = undefined, - textTransform: 'uppercase' | 'none' = undefined, - fontFamily: string = defaultFontFamily, - fontFeatureSettings: string = undefined -) { - return { - fontFamily, - fontFeatureSettings, - fontSize: pxToRem(fontSize), - // convert to unit-less - lineHeight: `${lineHeight / fontSize}`, - fontWeight, - letterSpacing: letterSpacing ? `${letterSpacing}em` : 0, - ...(textTransform ? { textTransform } : {}), - }; -} - -const customVariants: Record = { - 'display-lg': buildVariant(800, 64, 72), - 'display-md': buildVariant(800, 56, 64), - 'display-sm': buildVariant(800, 48, 56), - 'heading-xl': buildVariant(700, 34, 48), - 'heading-lg': buildVariant(700, 28, 40), - 'heading-md': buildVariant(700, 24, 32), - 'heading-sm': buildVariant(700, 20, 32), - 'uppercase-lg': buildVariant(800, 16, 16, 0.1, 'uppercase'), - 'uppercase-md': buildVariant(800, 14, 14, 0.1, 'uppercase'), - 'uppercase-sm': buildVariant(800, 12, 12, 0.1, 'uppercase'), - 'label-xl': buildVariant(600, 18, 20), - 'label-xl-strong': buildVariant(700, 18, 20), - 'label-lg': buildVariant(600, 16, 20), - 'label-lg-strong': buildVariant(700, 16, 20), - 'label-md': buildVariant(600, 14, 20), - 'label-md-strong': buildVariant(700, 14, 20), - 'label-sm': buildVariant(600, 12, 20), - 'label-sm-strong': buildVariant(700, 12, 20), - 'paragraph-xl': buildVariant(400, 18, 28), - 'paragraph-lg': buildVariant(400, 16, 24), - 'paragraph-md': buildVariant(400, 14, 20), - 'paragraph-sm': buildVariant(400, 12, 20), - 'code-lg': buildVariant(500, 18, 28, undefined, undefined, codeFontFamily), - 'code-md': buildVariant(500, 16, 24, undefined, undefined, codeFontFamily), - 'code-sm': buildVariant(500, 14, 20, undefined, undefined, codeFontFamily), -}; - -const typography: SparkTypographyOptions = { - // override default Roboto - fontFamily: defaultFontFamily, - // override default 14px - fontSize: defaultFontSize, - // override default division by 14 - pxToRem, - // specify all mui defaults (some Mui components rely on these by default) - h1: customVariants['display-md'], - h2: customVariants['display-sm'], - h3: customVariants['heading-xl'], - h4: customVariants['heading-lg'], - h5: customVariants['heading-md'], - h6: customVariants['heading-sm'], - subtitle1: customVariants['label-lg'], - subtitle2: customVariants['label-md'], - body1: customVariants['paragraph-lg'], - body2: customVariants['paragraph-md'], - button: { ...customVariants['label-lg'], textTransform: 'none' }, - caption: customVariants['label-sm'], - overline: customVariants['uppercase-sm'], - ...customVariants, -}; - -export default typography; diff --git a/libs/spark/src/unstable_createSvgIcon.tsx b/libs/spark/src/unstable_createSvgIcon.tsx deleted file mode 100644 index f7a5606f4..000000000 --- a/libs/spark/src/unstable_createSvgIcon.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import createSvgIcon from './alpha/createSvgIcon'; - -/** @deprecated use `alpha/createSvgIcon` */ -const unstable_createSvgIcon = createSvgIcon; - -export default unstable_createSvgIcon; diff --git a/libs/spark/src/useAutocomplete_unstable/index.ts b/libs/spark/src/useAutocomplete_unstable/index.ts deleted file mode 100644 index c8c3718ea..000000000 --- a/libs/spark/src/useAutocomplete_unstable/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -export { - /** @deprecated use `alpha/useAutocomplete` */ - default, -} from '../alpha/useAutocomplete'; -export { - /** @deprecated */ - createFilterOptions, -} from '../alpha/useAutocomplete'; -export type { - /** @deprecated */ - UseAutocompleteProps as UseAutocomplete_UnstableProps, - /** @deprecated */ - UseAutocompleteResult as UseAutocomplete_UnstableResult, - /** @deprecated */ - UseAutocompleteResultGetClearIndicatorProps as UseAutocomplete_UnstableResultGetClearIndicatorProps, - /** @deprecated */ - UseAutocompleteResultGetInputLabelProps as UseAutocomplete_UnstableResultGetInputLabelProps, - /** @deprecated */ - UseAutocompleteResultGetInputProps as UseAutocomplete_UnstableResultGetInputProps, - /** @deprecated */ - UseAutocompleteResultGetListboxProps as UseAutocomplete_UnstableResultGetListboxProps, - /** @deprecated */ - UseAutocompleteResultGetMultipleValueProps as UseAutocomplete_UnstableResultGetMultipleValueProps, - /** @deprecated */ - UseAutocompleteResultGetOptionProps as UseAutocomplete_UnstableResultGetOptionProps, - /** @deprecated */ - UseAutocompleteResultGetPopupIndicatorProps as UseAutocomplete_UnstableResultGetPopupIndicatorProps, - /** @deprecated */ - UseAutocompleteResultGetRootProps as UseAutocomplete_UnstableResultGetRootProps, - /** @deprecated */ - UseAutocompleteValue, -} from '../alpha/useAutocomplete'; diff --git a/libs/spark/src/useDropdown_unstable/index.ts b/libs/spark/src/useDropdown_unstable/index.ts deleted file mode 100644 index 4d3a13c08..000000000 --- a/libs/spark/src/useDropdown_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useDropdown` */ - default, -} from '../alpha/useDropdown'; diff --git a/libs/spark/src/useFormControl/index.ts b/libs/spark/src/useFormControl/index.ts deleted file mode 100644 index 7d871d5b5..000000000 --- a/libs/spark/src/useFormControl/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useFormControl'; diff --git a/libs/spark/src/useFormControl/useFormControl.ts b/libs/spark/src/useFormControl/useFormControl.ts deleted file mode 100644 index 9558bf47a..000000000 --- a/libs/spark/src/useFormControl/useFormControl.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated */ - useFormControl as default, -} from '@material-ui/core/FormControl'; diff --git a/libs/spark/src/useFormControlExtra_unstable/index.ts b/libs/spark/src/useFormControlExtra_unstable/index.ts deleted file mode 100644 index f9c159f1a..000000000 --- a/libs/spark/src/useFormControlExtra_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useFormControlExtra` */ - default, -} from '../alpha/useFormControlExtra'; diff --git a/libs/spark/src/useFormControl_unstable/index.ts b/libs/spark/src/useFormControl_unstable/index.ts deleted file mode 100644 index 83314dd40..000000000 --- a/libs/spark/src/useFormControl_unstable/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { - /** @deprecated use `alpha/useFormControl` */ - default, -} from '../alpha/useFormControl'; -export type { - /** @deprecated */ - UseFormControlParams as UseFormControl_UnstableParams, - /** @deprecated */ - UseFormControlResult as UseFormControl_UnstableResult, - /** @deprecated */ - FormControlProperties as FormControlProperties_Unstable, -} from '../alpha/useFormControl'; diff --git a/libs/spark/src/useMediaQuery/index.ts b/libs/spark/src/useMediaQuery/index.ts deleted file mode 100644 index c996e8b7e..000000000 --- a/libs/spark/src/useMediaQuery/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useMediaQuery'; diff --git a/libs/spark/src/useMediaQuery/useMediaQuery.ts b/libs/spark/src/useMediaQuery/useMediaQuery.ts deleted file mode 100644 index cfa85b83c..000000000 --- a/libs/spark/src/useMediaQuery/useMediaQuery.ts +++ /dev/null @@ -1,4 +0,0 @@ -import useMediaQuery from '@material-ui/core/useMediaQuery'; - -/** @deprecated */ -export default useMediaQuery; diff --git a/libs/spark/src/useMediaQuery_unstable/index.ts b/libs/spark/src/useMediaQuery_unstable/index.ts deleted file mode 100644 index 73a2c78e8..000000000 --- a/libs/spark/src/useMediaQuery_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useMediaQuery` */ - default, -} from '../alpha/useMediaQuery'; diff --git a/libs/spark/src/useRadioGroupExtra_unstable/index.ts b/libs/spark/src/useRadioGroupExtra_unstable/index.ts deleted file mode 100644 index 6fd072bd7..000000000 --- a/libs/spark/src/useRadioGroupExtra_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useRadioGroupExtra` */ - default, -} from '../alpha/useRadioGroupExtra'; diff --git a/libs/spark/src/useSideBarTrigger_unstable/index.ts b/libs/spark/src/useSideBarTrigger_unstable/index.ts deleted file mode 100644 index 5223a1aa6..000000000 --- a/libs/spark/src/useSideBarTrigger_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useSideBarTrigger` */ - default, -} from '../alpha/useSideBarTrigger'; diff --git a/libs/spark/src/useSideBar_unstable/index.ts b/libs/spark/src/useSideBar_unstable/index.ts deleted file mode 100644 index 6d5ba2ecb..000000000 --- a/libs/spark/src/useSideBar_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useSideBar` */ - default, -} from '../alpha/useSideBar'; diff --git a/libs/spark/src/useTabs_unstable/index.ts b/libs/spark/src/useTabs_unstable/index.ts deleted file mode 100644 index d9494ec14..000000000 --- a/libs/spark/src/useTabs_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useTabs` */ - default, -} from '../alpha/useTabs'; diff --git a/libs/spark/src/useTheme/index.ts b/libs/spark/src/useTheme/index.ts deleted file mode 100644 index 9c47c391c..000000000 --- a/libs/spark/src/useTheme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './useTheme'; diff --git a/libs/spark/src/useTheme/useTheme.ts b/libs/spark/src/useTheme/useTheme.ts deleted file mode 100644 index fdea7d542..000000000 --- a/libs/spark/src/useTheme/useTheme.ts +++ /dev/null @@ -1,4 +0,0 @@ -import useTheme from '@material-ui/core/styles/useTheme'; - -/** @deprecated */ -export default useTheme; diff --git a/libs/spark/src/useTheme_unstable/index.ts b/libs/spark/src/useTheme_unstable/index.ts deleted file mode 100644 index 85f6854c3..000000000 --- a/libs/spark/src/useTheme_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useTheme` */ - default, -} from '../alpha/useTheme'; diff --git a/libs/spark/src/useToasts_unstable/index.ts b/libs/spark/src/useToasts_unstable/index.ts deleted file mode 100644 index 51fc5432f..000000000 --- a/libs/spark/src/useToasts_unstable/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - /** @deprecated use `alpha/useToasts` */ - default, -} from '../alpha/useToasts'; diff --git a/libs/spark/src/utils/ClassNameMap.ts b/libs/spark/src/utils/ClassNameMap.ts deleted file mode 100644 index 2a053ddfd..000000000 --- a/libs/spark/src/utils/ClassNameMap.ts +++ /dev/null @@ -1,5 +0,0 @@ -/* Full credit to https://github.com/mui-org/material-ui/blob/5cc1d0fc8756534f181d55af02a5a0d65b486603/packages/material-ui-styles/src/withStyles/withStyles.d.ts#L81 */ -export type ClassNameMap = Record< - ClassKey, - string ->; diff --git a/libs/spark/src/utils/OverridableComponent.ts b/libs/spark/src/utils/OverridableComponent.ts deleted file mode 100644 index 1d14f221a..000000000 --- a/libs/spark/src/utils/OverridableComponent.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type { - OverrideProps, - OverridableComponent, -} from '@material-ui/core/OverridableComponent'; diff --git a/libs/spark/src/utils/StandardProps.ts b/libs/spark/src/utils/StandardProps.ts deleted file mode 100644 index 2cfa013df..000000000 --- a/libs/spark/src/utils/StandardProps.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { CSSProperties, Ref } from 'react'; -import type { StyledComponentProps } from '../withStyles'; - -/** - * All standard components exposed by `material-ui` are `StyledComponents` with - * certain `classes`, on which one can also set a top-level `className` and inline - * `style`. - * Credit to https://github.com/mui-org/material-ui/blob/c545ccab7edfdf4a44d4ec2f4bf10ebc7fd00259/packages/material-ui/src/index.d.ts - */ -export type StandardProps< - C, - ClassKey extends string, - Removals extends keyof C = never -> = Omit & - StyledComponentProps & { - className?: string; - ref?: C extends { ref?: infer RefType } ? RefType : Ref; - style?: CSSProperties; - }; diff --git a/libs/spark/src/utils/capitalize.ts b/libs/spark/src/utils/capitalize.ts deleted file mode 100644 index f6b1cdd29..000000000 --- a/libs/spark/src/utils/capitalize.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** Uppercase the first letter. */ -export default function capitalize(string: string): string { - if (process.env.NODE_ENV !== 'production' && typeof string !== 'string') { - throw new Error( - 'Prenda Spark: capitalize(string) expects a string argument' - ); - } - - return string.charAt(0).toUpperCase() + string.slice(1); -} diff --git a/libs/spark/src/utils/createSvgIcon.tsx b/libs/spark/src/utils/createSvgIcon.tsx deleted file mode 100644 index 67c823828..000000000 --- a/libs/spark/src/utils/createSvgIcon.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// Original credit to https://github.com/mui-org/material-ui/blob/1c5beec4be20eae30e75c69ab513bbfec3e9baaf/packages/material-ui/src/utils/createSvgIcon.js -// Changes made since - -import type { ReactNode } from 'react'; -import React, { forwardRef, memo } from 'react'; -import SvgIcon from '../SvgIcon'; -import type { SvgIconProps } from '../SvgIcon'; - -export default function createSvgIcon( - path: ReactNode, - displayName: string, - viewBox?: string, - width?: string, - height?: string -): typeof SvgIcon { - const Component = ( - props: SvgIconProps, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ref: any - ) => ( - - {path} - - ); - - if (process.env.NODE_ENV !== 'production') { - // Need to set `displayName` on the inner component for `memo`. - // React prior to 16.14 ignores `displayName` on the wrapper. - Component.displayName = `${displayName}Icon`; - } - - Component.muiName = 'SvgIcon'; - - return memo(forwardRef(Component)) as typeof SvgIcon; -} diff --git a/libs/spark/src/utils/index.ts b/libs/spark/src/utils/index.ts deleted file mode 100644 index 48841016e..000000000 --- a/libs/spark/src/utils/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -export { default as capitalize } from './capitalize'; - -export * from './ClassNameMap'; - -export { default as createSvgIcon } from './createSvgIcon'; - -export * from './OverridableComponent'; - -export * from './StandardProps'; - -export { default as useClassesCapture } from './useClassesCapture'; - -export { default as useControlled } from './useControlled'; - -export { default as useId } from './useId'; - -export { default as useMergeClasses } from './useMergeClasses'; - -export { default as useUniqueId } from './useUniqueId'; diff --git a/libs/spark/src/utils/useClassesCapture.ts b/libs/spark/src/utils/useClassesCapture.ts deleted file mode 100644 index 2d01d2c0f..000000000 --- a/libs/spark/src/utils/useClassesCapture.ts +++ /dev/null @@ -1,38 +0,0 @@ -import clsx from 'clsx'; -import type { ClassNameMap } from './ClassNameMap'; - -/** - * Capture custom classes while preserving all other classes. - * @param classes Any `classes` object, usually from component props. - * @param baseCustomClasses A custom `classes` object that will act as a basis for capturing from the given `classes` parameter. - */ -export default function useClassesCapture< - ClassKey extends string, - CustomClassKey extends string ->({ - classes = {}, - baseCustomClasses, -}: { - classes: Partial>; - baseCustomClasses: ClassNameMap; -}): { - otherClasses: Partial>>; - customClasses: ClassNameMap; -} { - const otherClasses = {}; - const customClasses = { ...baseCustomClasses }; - - // build upon the above initial values - for (const [key, value] of Object.entries(classes)) { - // A short-circuit type check for whether this key should be merged with the `customClasses`; if already exists, then combine. This biases towards `customClasses` (i.e. ClassKey and CustomClassKey can have overlapping values but CustomClassKey wins -- on purpose) and is possible since `customClasses` is not a partial. - const customValue = customClasses[key]; - - if (customValue) { - customClasses[key] = clsx(customValue, value); - } else { - otherClasses[key] = value; - } - } - - return { otherClasses, customClasses }; -} diff --git a/libs/spark/src/utils/useControlled.ts b/libs/spark/src/utils/useControlled.ts deleted file mode 100644 index 6a1759ea5..000000000 --- a/libs/spark/src/utils/useControlled.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { useControlled as default } from '@material-ui/core/utils'; -export type { UseControlledProps } from '@material-ui/core/utils/useControlled'; diff --git a/libs/spark/src/utils/useId.ts b/libs/spark/src/utils/useId.ts deleted file mode 100644 index 85bb35e88..000000000 --- a/libs/spark/src/utils/useId.ts +++ /dev/null @@ -1,39 +0,0 @@ -// copied from https://github.com/mui/material-ui/blob/50966dfa785e2163e7d8f903678822fad9970ae3/packages/mui-utils/src/useId.ts -import React, { useEffect, useState } from 'react'; - -let globalId = 0; -const useGlobalId = (idOverride?: string): string | undefined => { - const [defaultId, setDefaultId] = useState(idOverride); - const id = idOverride || defaultId; - useEffect(() => { - if (defaultId == null) { - // Fallback to this default id when possible. - // Use the incrementing value for client-side rendering only. - // We can't use it server-side. - // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem - globalId += 1; - setDefaultId(`mui-${globalId}`); - } - }, [defaultId]); - return id; -}; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const maybeReactUseId: undefined | (() => string) = (React as any)[ - // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814 - 'useId' + '' -]; -/** - * - * @example
    - * @param idOverride - * @returns {string} - */ -export default function useId(idOverride?: string): string | undefined { - if (maybeReactUseId !== undefined) { - const reactId = maybeReactUseId(); - return idOverride ?? reactId; - } - // eslint-disable-next-line react-hooks/rules-of-hooks -- `useId` is invariant at runtime. - return useGlobalId(idOverride); -} diff --git a/libs/spark/src/utils/useMergeClasses.ts b/libs/spark/src/utils/useMergeClasses.ts deleted file mode 100644 index d159d0705..000000000 --- a/libs/spark/src/utils/useMergeClasses.ts +++ /dev/null @@ -1,23 +0,0 @@ -import clsx from 'clsx'; -import type { ClassNameMap } from './ClassNameMap'; - -/** - * Merge `classes` objects. - * @param baseClasses Any `classes` object, namely from component's default styling hook. - * @param classesProp Any `classes` object, namely from component's props. - */ -export default function useMergeClasses({ - baseClasses, - classesProp = {}, -}: { - baseClasses: ClassNameMap; - classesProp: Partial>; -}): ClassNameMap { - const classes = { ...baseClasses }; - - for (const [key, value] of Object.entries(classesProp)) { - classes[key] = clsx(value, classes[key]); - } - - return classes; -} diff --git a/libs/spark/src/utils/useUniqueId.ts b/libs/spark/src/utils/useUniqueId.ts deleted file mode 100644 index 003dc86e2..000000000 --- a/libs/spark/src/utils/useUniqueId.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useState, useEffect } from 'react'; - -/** - * Generate a pseudo-random string (~16 bits of entropy). Useful as an element `id`. - * @returns {string} - * @see https://github.com/mui-org/material-ui/blob/cd8aeb64a9038ae9cb8ecf1cd7fd8a2bfea2d6b6/packages/material-ui-lab/src/TabContext/TabContext.js#L12-L18 credit to Mui - */ -export default function useUniqueId(): string { - const [id, setId] = useState(''); - - useEffect(() => { - setId(`spark-d-${Math.round(Math.random() * 1e5)}`); - }, []); - - return id; -} diff --git a/libs/spark/src/withStyles/index.ts b/libs/spark/src/withStyles/index.ts deleted file mode 100644 index 77c240c09..000000000 --- a/libs/spark/src/withStyles/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './withStyles'; -export * from './withStyles'; diff --git a/libs/spark/src/withStyles/withStyles.spec.tsx b/libs/spark/src/withStyles/withStyles.spec.tsx deleted file mode 100644 index 347f14114..000000000 --- a/libs/spark/src/withStyles/withStyles.spec.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { stub } from 'sinon'; -import withStyles from './withStyles'; -import initialTheme from '../theme/initialTheme'; - -describe('withStyles', () => { - const Empty = () =>
    ; - - it("should supply Spark's theme by default", () => { - const styles = stub().returns({}); - const StyledComponent = withStyles(styles)(Empty); - - render(); - - expect(styles.args[0][0]).toEqual(initialTheme); - }); -}); diff --git a/libs/spark/src/withStyles/withStyles.ts b/libs/spark/src/withStyles/withStyles.ts deleted file mode 100644 index 3f768bae0..000000000 --- a/libs/spark/src/withStyles/withStyles.ts +++ /dev/null @@ -1,61 +0,0 @@ -import type { PropInjector } from '@material-ui/types'; -import type { - BaseCSSProperties, - ClassNameMap, - CreateCSSProperties, - CSSProperties, - StyledComponentProps, - Styles as MuiStyles, - StyleRules, - StyleRulesCallback, - WithStyles, - WithStylesOptions, -} from '@material-ui/core/styles/withStyles'; -import { default as muiWithStyles } from '@material-ui/core/styles/withStyles'; -import type { DefaultTheme, Theme } from '../theme'; -import initialTheme from '../theme/initialTheme'; - -type Styles< - ClassKey extends string = string, - // eslint-disable-next-line @typescript-eslint/ban-types - Props extends object = {}, - Theme = DefaultTheme -> = MuiStyles< - Theme, - // eslint-disable-next-line @typescript-eslint/ban-types - Props, - ClassKey ->; - -// enumerate all exports since `tsc` incorrectly identifies the re-exports in '@material-ui/core/styles/withStyles' as JS objects and not TS types. -export type { - BaseCSSProperties, - ClassNameMap, - CreateCSSProperties, - CSSProperties, - StyledComponentProps, - Styles, - StyleRules, - StyleRulesCallback, - WithStyles, - WithStylesOptions, -}; - -export default function withStyles< - ClassKey extends string, - // eslint-disable-next-line @typescript-eslint/ban-types - Options extends WithStylesOptions = {}, - // eslint-disable-next-line @typescript-eslint/ban-types - Props extends object = {} ->( - styles: Styles, - options?: Options -): PropInjector< - WithStyles, - StyledComponentProps & Props -> { - return muiWithStyles(styles, { - defaultTheme: initialTheme, - ...options, - }); -} diff --git a/libs/spark/tsconfig.build.json b/libs/spark/tsconfig.build.json deleted file mode 100644 index e35c303d9..000000000 --- a/libs/spark/tsconfig.build.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - // This config is for emitting declarations (.d.ts) only - // Actual .ts source files are transpiled via babel - "extends": "./tsconfig", - "compilerOptions": { - "declaration": true, - "noEmit": false, - "emitDeclarationOnly": true, - "outDir": "../../dist/libs/spark", - "rootDir": "./src" - }, - "include": ["src/**/*.ts"], - "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"] -} diff --git a/libs/spark/tsconfig.json b/libs/spark/tsconfig.json deleted file mode 100644 index f31166130..000000000 --- a/libs/spark/tsconfig.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "jsx": "react-jsx", - "allowJs": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true - }, - "files": [], - "include": ["./jest-setup.ts"], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - }, - { - "path": "./.storybook/tsconfig.json" - } - ] -} diff --git a/libs/spark/tsconfig.lib.json b/libs/spark/tsconfig.lib.json deleted file mode 100644 index 00feba6e2..000000000 --- a/libs/spark/tsconfig.lib.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { "outDir": "../../dist/out-tsc", "types": ["node"] }, - "files": [ - "../../node_modules/@nrwl/react/typings/cssmodule.d.ts", - "../../node_modules/@nrwl/react/typings/image.d.ts" - ], - "exclude": [ - "**/*.spec.ts", - "**/*.test.ts", - "**/*.spec.tsx", - "**/*.test.tsx", - "**/*.stories.ts", - "**/*.stories.js", - "**/*.stories.jsx", - "**/*.stories.tsx" - ], - "include": [ - "**/*.js", - "**/*.jsx", - "**/*.ts", - "**/*.tsx", - "../../scripts/babel.config.js" - ] -} diff --git a/libs/spark/tsconfig.spec.json b/libs/spark/tsconfig.spec.json deleted file mode 100644 index 3ff85c122..000000000 --- a/libs/spark/tsconfig.spec.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node", "testing-library__jest-dom"] - }, - "include": [ - "**/*.spec.ts", - "**/*.test.ts", - "**/*.spec.tsx", - "**/*.test.tsx", - "**/*.spec.js", - "**/*.test.js", - "**/*.spec.jsx", - "**/*.test.jsx", - "**/*.d.ts" - ] -} diff --git a/package-lock.json b/package-lock.json index 7027f6dce..d28116d72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2700,11 +2700,6 @@ } } }, - "@emotion/hash": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" - }, "@eslint/eslintrc": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz", @@ -3939,100 +3934,6 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, - "@material-ui/core": { - "version": "4.12.3", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz", - "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.11.4", - "@material-ui/system": "^4.12.1", - "@material-ui/types": "5.1.0", - "@material-ui/utils": "^4.11.2", - "@types/react-transition-group": "^4.2.0", - "clsx": "^1.0.4", - "hoist-non-react-statics": "^3.3.2", - "popper.js": "1.16.1-lts", - "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0", - "react-transition-group": "^4.4.0" - } - }, - "@material-ui/lab": { - "version": "4.0.0-alpha.60", - "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz", - "integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.11.2", - "clsx": "^1.0.4", - "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0" - } - }, - "@material-ui/styles": { - "version": "4.11.4", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", - "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==", - "requires": { - "@babel/runtime": "^7.4.4", - "@emotion/hash": "^0.8.0", - "@material-ui/types": "5.1.0", - "@material-ui/utils": "^4.11.2", - "clsx": "^1.0.4", - "csstype": "^2.5.2", - "hoist-non-react-statics": "^3.3.2", - "jss": "^10.5.1", - "jss-plugin-camel-case": "^10.5.1", - "jss-plugin-default-unit": "^10.5.1", - "jss-plugin-global": "^10.5.1", - "jss-plugin-nested": "^10.5.1", - "jss-plugin-props-sort": "^10.5.1", - "jss-plugin-rule-value-function": "^10.5.1", - "jss-plugin-vendor-prefixer": "^10.5.1", - "prop-types": "^15.7.2" - }, - "dependencies": { - "csstype": { - "version": "2.6.17", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", - "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==" - } - } - }, - "@material-ui/system": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz", - "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.11.2", - "csstype": "^2.5.2", - "prop-types": "^15.7.2" - }, - "dependencies": { - "csstype": { - "version": "2.6.17", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", - "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==" - } - } - }, - "@material-ui/types": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", - "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" - }, - "@material-ui/utils": { - "version": "4.11.2", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", - "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", - "requires": { - "@babel/runtime": "^7.4.4", - "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0" - } - }, "@nicolo-ribaudo/chokidar-2": { "version": "2.1.8-no-fsevents", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.tgz", @@ -8693,7 +8594,8 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true }, "@types/qs": { "version": "6.9.7", @@ -8711,6 +8613,7 @@ "version": "17.0.40", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz", "integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==", + "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -8726,14 +8629,6 @@ "@types/react": "*" } }, - "@types/react-transition-group": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz", - "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==", - "requires": { - "@types/react": "*" - } - }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -8752,7 +8647,8 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true }, "@types/serve-index": { "version": "1.9.1", @@ -11234,11 +11130,6 @@ "shallow-clone": "^3.0.0" } }, - "clsx": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", - "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" - }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -11768,15 +11659,6 @@ "source-map": "^0.6.1" } }, - "css-vendor": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", - "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", - "requires": { - "@babel/runtime": "^7.8.3", - "is-in-browser": "^1.0.2" - } - }, "css-what": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz", @@ -11902,7 +11784,8 @@ "csstype": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", + "dev": true }, "damerau-levenshtein": { "version": "1.0.7", @@ -12282,15 +12165,6 @@ "integrity": "sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g==", "dev": true }, - "dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "requires": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "dom-serializer": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", @@ -14823,11 +14697,6 @@ } } }, - "goober": { - "version": "2.1.11", - "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz", - "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==" - }, "gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -15026,21 +14895,6 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, - "hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "requires": { - "react-is": "^16.7.0" - }, - "dependencies": { - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - } - } - }, "homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -15250,11 +15104,6 @@ "integrity": "sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==", "dev": true }, - "hyphenate-style-name": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", - "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" - }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -15346,14 +15195,6 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, - "indefinite-observable": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz", - "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==", - "requires": { - "symbol-observable": "1.2.0" - } - }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -15580,11 +15421,6 @@ "is-extglob": "^2.1.1" } }, - "is-in-browser": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" - }, "is-map": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz", @@ -18762,85 +18598,6 @@ "verror": "1.10.0" } }, - "jss": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.6.0.tgz", - "integrity": "sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw==", - "requires": { - "@babel/runtime": "^7.3.1", - "csstype": "^3.0.2", - "indefinite-observable": "^2.0.1", - "is-in-browser": "^1.1.3", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-camel-case": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz", - "integrity": "sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A==", - "requires": { - "@babel/runtime": "^7.3.1", - "hyphenate-style-name": "^1.0.3", - "jss": "10.6.0" - } - }, - "jss-plugin-default-unit": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz", - "integrity": "sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.6.0" - } - }, - "jss-plugin-global": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz", - "integrity": "sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.6.0" - } - }, - "jss-plugin-nested": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz", - "integrity": "sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.6.0", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-props-sort": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz", - "integrity": "sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.6.0" - } - }, - "jss-plugin-rule-value-function": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz", - "integrity": "sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.6.0", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-vendor-prefixer": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz", - "integrity": "sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ==", - "requires": { - "@babel/runtime": "^7.3.1", - "css-vendor": "^2.0.8", - "jss": "10.6.0" - } - }, "jsx-ast-utils": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz", @@ -20007,15 +19764,6 @@ "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==", "dev": true }, - "notistack": { - "version": "3.0.0-alpha.11", - "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.0-alpha.11.tgz", - "integrity": "sha512-QfiVC1On1Zfs1UADxgRRhcVhAWveD3lBUKhDwx0GdXoSKii0UARz0tfJyIwwOxy5Lr+DOeAHz8Mvl1GwpeVnQQ==", - "requires": { - "clsx": "^1.1.0", - "goober": "^2.0.33" - } - }, "npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -20987,11 +20735,6 @@ "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==", "dev": true }, - "popper.js": { - "version": "1.16.1-lts", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", - "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" - }, "portfinder": { "version": "1.0.32", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz", @@ -21694,6 +21437,7 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -21703,7 +21447,8 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true } } }, @@ -21879,7 +21624,8 @@ "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true }, "react-refresh": { "version": "0.10.0", @@ -21887,17 +21633,6 @@ "integrity": "sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==", "dev": true }, - "react-transition-group": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", - "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", - "requires": { - "@babel/runtime": "^7.5.5", - "dom-helpers": "^5.0.1", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" - } - }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -23696,7 +23431,8 @@ "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", + "dev": true }, "symbol-tree": { "version": "3.2.4", @@ -23828,11 +23564,6 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, - "tiny-warning": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", - "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" - }, "tmp": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", diff --git a/package.json b/package.json index edf1dc3e1..e62d3f4ed 100644 --- a/package.json +++ b/package.json @@ -24,22 +24,14 @@ "workspace-generator": "nx workspace-generator", "dep-graph": "nx dep-graph", "help": "nx help", - "prepare": "husky install", - "build:components": "rimraf ./dist/libs/spark && npm run build:components:envs && npm run build:components:copy-files && npm run build:components:types", - "build:components:envs": "NODE_ENV=\"production\" BABEL_ENV=\"cjs\" babel libs/spark/src --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" --out-dir ./dist/libs/spark --ignore \"libs/spark/src/**/*.stories.tsx\",\"libs/spark/src/**/*.spec.tsx\",\"libs/spark/src/**/*.test.tsx\" && BABEL_ENV=\"esm\" babel libs/spark/src --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" --out-dir ./dist/libs/spark/esm --ignore \"libs/spark/src/**/*.stories.tsx\",\"libs/spark/src/**/*.spec.tsx\",\"libs/spark/src/**/*.test.tsx\" && BABEL_ENV=\"es\" babel libs/spark/src --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" --out-dir ./dist/libs/spark/es --ignore \"libs/spark/src/**/*.stories.tsx\",\"libs/spark/src/**/*.spec.tsx\",\"libs/spark/src/**/*.test.tsx\"", - "build:components:types": "tsc -p ./libs/spark/tsconfig.build.json", - "build:components:copy-files": "node ./scripts/copy-files.js ./libs/spark ./dist/libs/spark" + "prepare": "husky install" }, "private": true, "dependencies": { "@babel/runtime": "7.12.18", - "@material-ui/core": "^4.12.3", - "@material-ui/lab": "^4.0.0-alpha.60", "babel-plugin-react-remove-properties": "^0.3.0", - "clsx": "^1.1.1", "core-js": "^3.6.5", "document-register-element": "1.13.1", - "notistack": "^3.0.0-alpha.11", "react": "17.0.2", "react-dom": "17.0.2", "regenerator-runtime": "0.13.7", diff --git a/tsconfig.base.json b/tsconfig.base.json index 47dfddbdf..2c1e0a6bf 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -15,9 +15,7 @@ "skipDefaultLibCheck": true, "forceConsistentCasingInFileNames": true, "baseUrl": ".", - "paths": { - "@prenda/spark": ["libs/spark/src/index.ts"] - } + "paths": {} }, "exclude": ["node_modules", "tmp"] } diff --git a/workspace.json b/workspace.json index f754f1f74..3701672da 100644 --- a/workspace.json +++ b/workspace.json @@ -1,53 +1,4 @@ { "version": 2, - "projects": { - "spark": { - "root": "libs/spark", - "sourceRoot": "libs/spark/src", - "projectType": "library", - "targets": { - "build": { - "executor": "@nrwl/web:rollup", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/libs/spark", - "tsConfig": "libs/spark/tsconfig.lib.json", - "project": "libs/spark/package.json", - "entryFile": "libs/spark/src/index.ts", - "external": [ - "@material-ui/core", - "@material-ui/lab", - "react", - "react-dom", - "react/jsx-runtime" - ], - "rollupConfig": "@nrwl/react/plugins/bundle-rollup", - "assets": [ - { - "glob": "libs/spark/README.md", - "input": ".", - "output": "." - } - ] - } - }, - "lint": { - "executor": "@nrwl/linter:eslint", - "options": { - "lintFilePatterns": ["libs/spark/**/*.{ts,tsx,js,jsx}"] - }, - "outputs": ["{options.outputFile}"] - }, - "test": { - "executor": "@nrwl/jest:jest", - "outputs": ["coverage/libs/spark"], - "options": { - "jestConfig": "libs/spark/jest.config.js", - "passWithNoTests": true - } - } - }, - "tags": [] - } - } + "projects": {} }