Skip to content

Commit

Permalink
Add missed showcases (empty for now) and align their order with mui.com
Browse files Browse the repository at this point in the history
  • Loading branch information
@aerialist7
aerialist7 committed Oct 7, 2023
1 parent 771f3c7 commit f00c922
Show file tree
Hide file tree
Showing 67 changed files with 504 additions and 245 deletions.
136 changes: 96 additions & 40 deletions src/jsMain/kotlin/team/karakum/Router.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,49 +8,105 @@ import team.karakum.error.ErrorPage
import team.karakum.page.Page
import team.karakum.showcase.Showcase
import team.karakum.showcase.ShowcaseMaterial
import team.karakum.showcase.material.*
import team.karakum.showcase.material.ProgressShowcase
import team.karakum.showcase.material.data.*
import team.karakum.showcase.material.feedback.*
import team.karakum.showcase.material.inputs.*
import team.karakum.showcase.material.lab.MasonryShowcase
import team.karakum.showcase.material.lab.TimelineShowcase
import team.karakum.showcase.material.layout.*
import team.karakum.showcase.material.muix.ChartsShowcase
import team.karakum.showcase.material.muix.DataGridShowcase
import team.karakum.showcase.material.muix.DateAndTimePickersShowcase
import team.karakum.showcase.material.muix.TreeViewShowcase
import team.karakum.showcase.material.navigation.*
import team.karakum.showcase.material.surfaces.AccordionShowcase
import team.karakum.showcase.material.surfaces.AppBarShowcase
import team.karakum.showcase.material.surfaces.CardShowcase
import team.karakum.showcase.material.surfaces.PaperShowcase
import team.karakum.showcase.material.utils.*
import kotlin.js.Promise.Companion.resolve

private val MATERIAL_SHOWCASES: Array<out Showcase> = arrayOf(
Showcase("accordion", "Accordion", AccordionShowcase),
Showcase("alert", "Alert", AlertShowcase),
Showcase("app-bar", "App Bar", AppBarShowcase),
Showcase("autocomplete", "Autocomplete", AutocompleteShowcase),
Showcase("avatars", "Avatars", AvatarsShowcase),
Showcase("backdrop", "Backdrop", BackdropShowcase),
Showcase("badges", "Badges", BadgesShowcase),
Showcase("bottom-navigation", "Bottom Navigation", BottomNavigationShowcase),
Showcase("breadcrumbs", "Breadcrumbs", BreadcrumbsShowcase),
Showcase("buttons", "Buttons", ButtonsShowcase),
Showcase("cards", "Cards", CardsShowcase),
Showcase("checkboxes", "Checkboxes", CheckboxesShowcase),
Showcase("chips", "Chips", ChipsShowcase),
Showcase("dialogs", "Dialogs", DialogsShowcase),
Showcase("drawers", "Drawers", DrawersShowcase),
Showcase("floating-action-button", "Floating Action Button", FloatingActionButtonShowcase),
Showcase("image-list", "Image List", ImageListShowcase),
Showcase("links", "Links", LinksShowcase),
Showcase("lists", "Lists", ListsShowcase),
Showcase("menus", "Menus", MenusShowcase),
Showcase("pagination", "Pagination", PaginationShowcase),
Showcase("paper", "Paper", PaperShowcase),
Showcase("pickers", "Pickers", PickersShowcase),
Showcase("popover", "Popover", PopoverShowcase),
Showcase("popper", "Popper", PopperShowcase),
Showcase("progress", "Progress", ProgressShowcase),
Showcase("radio-buttons", "Radio Buttons", RadioButtonsShowcase),
Showcase("rating", "Rating", RatingShowcase),
Showcase("selects", "Selects", SelectsShowcase),
Showcase("skeleton", "Skeleton", SkeletonShowcase),
Showcase("slider", "Slider", SliderShowcase),
Showcase("snackbars", "Snackbars", SnackbarsShowcase),
Showcase("steppers", "Steppers", SteppersShowcase),
Showcase("switches", "Switches", SwitchesShowcase),
Showcase("tables", "Tables", TablesShowcase),
Showcase("tabs", "Tabs", TabsShowcase),
Showcase("text-fields", "Text Fields", TextFieldsShowcase),
Showcase("toggle-button", "Toggle Button", ToggleButtonShowcase),
Showcase("tooltips", "Tooltips", TooltipsShowcase),
// inputs
Showcase("material-ui/react-autocomplete", "Autocomplete", AutocompleteShowcase),
Showcase("material-ui/react-button", "Button", ButtonShowcase),
Showcase("material-ui/react-button-group", "Button Group", ButtonGroupShowcase),
Showcase("material-ui/react-checkbox", "Checkbox", CheckboxShowcase),
Showcase("material-ui/react-floating-action-button", "Floating Action Button", FloatingActionButtonShowcase),
Showcase("material-ui/react-radio-button", "Radio Group", RadioGroupShowcase),
Showcase("material-ui/react-rating", "Rating", RatingShowcase),
Showcase("material-ui/react-select", "Select", SelectShowcase),
Showcase("material-ui/react-slider", "Slider", SliderShowcase),
Showcase("material-ui/react-switch", "Switch", SwitchShowcase),
Showcase("material-ui/react-text-field", "Text Field", TextFieldShowcase),
Showcase("material-ui/react-transfer-list", "Transfer List", TransferListShowcase),
Showcase("material-ui/react-toggle-button", "Toggle Button", ToggleButtonShowcase),

// data display
Showcase("material-ui/react-avatar", "Avatar", AvatarShowcase),
Showcase("material-ui/react-badge", "Badge", BadgeShowcase),
Showcase("material-ui/react-chip", "Chip", ChipShowcase),
Showcase("material-ui/react-divider", "Divider", DividerShowcase),
Showcase("material-ui/icons", "Divider", IconsShowcase),
Showcase("material-ui/react-list", "List", ListShowcase),
Showcase("material-ui/react-table", "Table", TableShowcase),
Showcase("material-ui/react-tooltip", "Tooltip", TooltipShowcase),
Showcase("material-ui/react-typography", "Typography", TypographyShowcase),

// feedback
Showcase("material-ui/react-alert", "Alert", AlertShowcase),
Showcase("material-ui/react-backdrop", "Backdrop", BackdropShowcase),
Showcase("material-ui/react-dialog", "Dialog", DialogShowcase),
Showcase("material-ui/react-progress", "Progress", ProgressShowcase),
Showcase("material-ui/react-skeleton", "Skeleton", SkeletonShowcase),
Showcase("material-ui/react-snackbar", "Snackbar", SnackbarShowcase),

// surfaces
Showcase("material-ui/react-accordion", "Accordion", AccordionShowcase),
Showcase("material-ui/react-app-bar", "App Bar", AppBarShowcase),
Showcase("material-ui/react-card", "Card", CardShowcase),
Showcase("material-ui/react-paper", "Paper", PaperShowcase),

// navigation
Showcase("material-ui/react-bottom-navigation", "Bottom Navigation", BottomNavigationShowcase),
Showcase("material-ui/react-breadcrumbs", "Breadcrumbs", BreadcrumbsShowcase),
Showcase("material-ui/react-drawer", "Drawer", DrawerShowcase),
Showcase("material-ui/react-link", "Link", LinkShowcase),
Showcase("material-ui/react-menu", "Menu", MenuShowcase),
Showcase("material-ui/react-pagination", "Pagination", PaginationShowcase),
Showcase("material-ui/react-speed-dial", "Speed Dial", SpeedDialShowcase),
Showcase("material-ui/react-stepper", "Stepper", StepperShowcase),
Showcase("material-ui/react-tabs", "Tab", TabsShowcase),

// layout
Showcase("material-ui/react-box", "Box", BoxShowcase),
Showcase("material-ui/react-container", "Container", ContainerShowcase),
Showcase("material-ui/react-grid", "Grid", GridShowcase),
Showcase("material-ui/react-grid2", "Grid v2", Grid2Showcase),
Showcase("material-ui/react-stack", "Stack", StackShowcase),
Showcase("material-ui/react-image-list", "Image List", ImageListShowcase),
Showcase("material-ui/react-hidden", "Hidden", HiddenShowcase),

// utils
Showcase("material-ui/react-click-away-listener", "Click-Away Listener", ClickAwayListenerShowcase),
Showcase("material-ui/react-css-baseline", "CSS Baseline", CssBaselineShowcase),
Showcase("material-ui/react-modal", "Modal", ModalShowcase),
Showcase("material-ui/react-popover", "Popover", PopoverShowcase),
Showcase("material-ui/react-popper", "Popper", PopperShowcase),
Showcase("material-ui/react-portal", "Portal", PortalShowcase),
Showcase("material-ui/transitions", "Transitions", TransitionsShowcase),
Showcase("material-ui/react-use-media-query", "useMediaQuery", UseMediaQueryShowcase),

// labs
Showcase("material-ui/react-masonry", "Masonry", MasonryShowcase),
Showcase("material-ui/react-timeline", "Timeline", TimelineShowcase),

// muix
Showcase("x/react-data-grid", "Data Grid", DataGridShowcase),
Showcase("x/react-date-pickers", "Date and Time Pickers", DateAndTimePickersShowcase),
Showcase("x/react-charts", "Charts", ChartsShowcase),
Showcase("x/react-tree-view", "Tree View", TreeViewShowcase),
)

private val PageLoader: LoaderFunction<*> = {
Expand Down
12 changes: 8 additions & 4 deletions src/jsMain/kotlin/team/karakum/page/Header.kt
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package team.karakum.page

import js.uri.decodeURIComponent
import kotlinx.browser.window
import mui.icons.material.Brightness4
import mui.icons.material.Brightness7
Expand All @@ -15,7 +16,7 @@ import react.dom.aria.AriaHasPopup.Companion.`false`
import react.dom.aria.ariaHasPopup
import react.dom.aria.ariaLabel
import react.dom.html.ReactHTML
import react.router.useLocation
import team.karakum.showcase.useCurrentShowcaseKey
import team.karakum.theme.Themes
import team.karakum.theme.useSetTheme
import team.karakum.theme.useTheme
Expand All @@ -25,7 +26,7 @@ import web.cssom.number
val Header = FC {
val theme = useTheme()
val setTheme = useSetTheme()
val lastPathname = useLocation().pathname.substringAfterLast("/")
val showcaseKey = useCurrentShowcaseKey()

AppBar {
sx {
Expand Down Expand Up @@ -74,7 +75,7 @@ val Header = FC {
size = Size.large
color = IconButtonColor.inherit
onClick = {
window.location.href = "https://mui.com/components/$lastPathname"
window.location.href = "https://mui.com/${decodeURIComponent(showcaseKey)}/"
}

MenuBook()
Expand All @@ -91,7 +92,7 @@ val Header = FC {
size = Size.large
color = IconButtonColor.inherit
onClick = {
var name = lastPathname
var name = showcaseKey
.split("-")
.asSequence()
.map { it.replaceFirstChar(Char::titlecase) }
Expand All @@ -101,6 +102,9 @@ val Header = FC {
name += ".kt"
}

// TODO: Remove it after storing selected showcase
name = ""

window.location.href =
"https://github.com/karakum-team/kotlin-mui-showcase/blob/main/src/jsMain/kotlin/team/karakum/showcase/material/$name"
}
Expand Down
9 changes: 5 additions & 4 deletions src/jsMain/kotlin/team/karakum/page/Sidebar.kt
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
package team.karakum.page

import emotion.styled.styled
import js.uri.encodeURIComponent
import mui.material.*
import mui.system.Box
import mui.system.sx
import react.*
import react.dom.html.ReactHTML
import react.router.dom.NavLink
import react.router.useLoaderData
import react.router.useLocation
import team.karakum.showcase.Showcase
import team.karakum.showcase.useCurrentShowcaseKey
import web.cssom.Color
import web.cssom.None
import web.cssom.Position
Expand Down Expand Up @@ -64,7 +65,7 @@ val Sidebar = FC<Props> {

private val ShowcaseList = FC {
val showcases = useLoaderData().unsafeCast<Array<out Showcase>>()
val lastPathname = useLocation().pathname.substringAfterLast("/")
val showcaseKey = useCurrentShowcaseKey()

Box {
Toolbar()
Expand All @@ -76,10 +77,10 @@ private val ShowcaseList = FC {

for ((key, name) in showcases) {
LinkButton {
to = key
to = encodeURIComponent(key)

ListItemButton {
selected = lastPathname == key
selected = showcaseKey == key

ListItemText {
primary = ReactNode(name)
Expand Down
140 changes: 0 additions & 140 deletions src/jsMain/kotlin/team/karakum/showcase/material/Autocomplete.kt
View file

This file was deleted.

4 changes: 2 additions & 2 deletions ...team/karakum/showcase/material/Avatars.kt → .../karakum/showcase/material/data/Avatar.kt
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
package team.karakum.showcase.material
package team.karakum.showcase.material.data

import mui.material.Avatar
import mui.material.AvatarGroup
import react.FC
import react.Props

val AvatarsShowcase = FC<Props> {
val AvatarShowcase = FC<Props> {
AvatarGroup {
max = 4

Expand Down
Loading

0 comments on commit f00c922

Please sign in to comment.