diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 000000000..7a8129353 --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,52 @@ +name: Deploy Gomix Docs to GitHub Pages + +on: + push: + branches: + - main + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Go + uses: actions/setup-go@v5 + with: + go-version: '1.22.x' + + - name: Build static site + run: | + cd examples/docs + go run . + + - name: Setup Pages + uses: actions/configure-pages@v5 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: 'examples/docs/dist' + + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/examples/docs/accordion.go b/examples/docs/accordion.go new file mode 100644 index 000000000..4cc73eb53 --- /dev/null +++ b/examples/docs/accordion.go @@ -0,0 +1,19 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderAccordion() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var Accordion = disclosure.Accordion`, nil), + Playground("Basic Usage", "Standard implementation of the Accordion component.", `Accordion()`, Accordion().Component()), + PropsTable([]map[string]string{ + {"name": "Collapsible", "type": "", "description": "Chainable method for Collapsible setting Gomix attributes/styles."}, + {"name": "Multiple", "type": "", "description": "Chainable method for Multiple setting Gomix attributes/styles."}, + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/accordionitem.go b/examples/docs/accordionitem.go new file mode 100644 index 000000000..eadaeb1e5 --- /dev/null +++ b/examples/docs/accordionitem.go @@ -0,0 +1,19 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderAccordionItem() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var AccordionItem = disclosure.AccordionItem`, nil), + Playground("Basic Usage", "Standard implementation of the AccordionItem component.", `AccordionItem(text("Title"), text("Content"))`, AccordionItem(text("Title"), text("Content")).Component()), + PropsTable([]map[string]string{ + {"name": "CollapseIcon", "type": "icon icons.IsIcon", "description": "Chainable method for CollapseIcon setting Gomix attributes/styles."}, + {"name": "ExpandIcon", "type": "icon icons.IsIcon", "description": "Chainable method for ExpandIcon setting Gomix attributes/styles."}, + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/alert.go b/examples/docs/alert.go new file mode 100644 index 000000000..8c37353f1 --- /dev/null +++ b/examples/docs/alert.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderAlert() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/feedback" + +var Alert = feedback.Alert`, nil), + Playground("Basic Usage", "Standard implementation of the Alert component.", `Alert()`, Alert().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/alertdialog.go b/examples/docs/alertdialog.go new file mode 100644 index 000000000..13551a9f9 --- /dev/null +++ b/examples/docs/alertdialog.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderAlertDialog() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/overlays" + +var AlertDialog = overlays.AlertDialog`, nil), + Playground("Basic Usage", "Standard implementation of the AlertDialog component.", `AlertDialog()`, AlertDialog().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/alias.go b/examples/docs/alias.go index 96017a5f9..40dc7ab7b 100644 --- a/examples/docs/alias.go +++ b/examples/docs/alias.go @@ -1,18 +1,26 @@ package main + + import ( "github.com/raitucarp/gomix" + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/element" "github.com/raitucarp/gomix/addons/alpinejs" + "github.com/raitucarp/gomix/components/buttons" + "github.com/raitucarp/gomix/components/data_display" + "github.com/raitucarp/gomix/components/disclosure" + "github.com/raitucarp/gomix/icons/fontawesome-5" + "github.com/raitucarp/gomix/components/feedback" + "github.com/raitucarp/gomix/components/forms" + "github.com/raitucarp/gomix/addons/google-fonts" "github.com/raitucarp/gomix/addons/htmx" - modern_normalize "github.com/raitucarp/gomix/addons/modern-normalize" - "github.com/raitucarp/gomix/components" layoutComponent "github.com/raitucarp/gomix/components/layout" - "github.com/raitucarp/gomix/components/disclosure" - "github.com/raitucarp/gomix/element" - fa5 "github.com/raitucarp/gomix/icons/fontawesome-5" - - googlefonts "github.com/raitucarp/gomix/addons/google-fonts" + "github.com/raitucarp/gomix/components/media_and_icons" + "github.com/raitucarp/gomix/addons/modern-normalize" + "github.com/raitucarp/gomix/components/overlays" "github.com/raitucarp/gomix/styles" + "github.com/raitucarp/gomix/components/typography" "github.com/raitucarp/gomix/value" ) @@ -20,8 +28,14 @@ type isComponent = components.IsComponent type page_path = gomix.LocationPath type fragment_path = gomix.FragmentPath type css = gomix.CSS - // app scope alias +// fragment scope +// page scope +// addons scope alias +// element scope +// style scope +// components +// font awesome var app = gomix.App var name = gomix.Name var addons = gomix.Addons @@ -37,27 +51,16 @@ var fragment_at = gomix.FragmentAt var style_global = gomix.StyleGlobal var style = gomix.Style var not_found_page = gomix.NotFoundPage -var layout = gomix.PageLayout var title_template = gomix.TitleTemplate -var static = gomix.Static - -// fragment scope var fragment = gomix.FragmentComponent - -// page scope var title_ = gomix.PageTitle var component = gomix.PageComponent var fragment_component = gomix.FragmentComponent -var static_paths = gomix.StaticGenerationPath - -// addons scope alias var _htmx = htmx.Addon var _modern_normalize = modern_normalize.Addon var usePlaywriteDeGrundFont = googlefonts.UseGoogleFontPlaywriteDeGrund var _alpine_addon = alpinejs.Alpine var alpine = alpinejs.Alpine - -// element scope var div = element.Div var aside = element.Aside var Main = element.Main @@ -68,9 +71,6 @@ var button = element.Button var a = element.A var span = element.Span var Htmx = htmx.Htmx - -// style scope - var hover = styles.Hover var dark = styles.Dark var md = styles.Md @@ -91,22 +91,69 @@ var px = value.Px[float64] var flex_1 = styles.FlexBy(value.Number(1)) var fill_red = styles.FillRed var overflowY_scroll = styles.OverflowYScroll - -// components var HStack = layoutComponent.HStack var VStack = layoutComponent.VStack var Text = components.Text -var Icon = components.Icon +var Icon = media_and_icons.Icon var List = components.List var Link = components.Link var ListItem = components.ListItem var ForEachComponentLink = components.ForEach[ComponentLink] var ForComponentGroup = components.ForEach[ComponentGroup] - var Accordion = disclosure.Accordion var AccordionItem = disclosure.AccordionItem - -// font awesome var fa_brand_android = fa5.FaBrandAndroid - var rem = value.Rem[float64] +var Alert = feedback.Alert +var AlertDialog = overlays.AlertDialog +var Avatar = media_and_icons.Avatar +var Badge = data_display.Badge +var Button = buttons.Button +var Center = layoutComponent.Center +var Checkbox = forms.Checkbox +var CircularProgress = feedback.CircularProgress +var CloseButton = buttons.CloseButton +var Code = typography.Code +var Divider = data_display.Divider +var Drawer = overlays.Drawer +var Grid = layoutComponent.Grid +var Heading = typography.Heading +var IconButton = buttons.IconButton +var Image = media_and_icons.Image +var Input = forms.Input +var Kbd = typography.Kbd +var Menu = overlays.Menu +var Modal = overlays.Modal +var NumberInput = forms.NumberInput +var PinInput = forms.PinInput +var Popover = overlays.Popover +var Progress = feedback.Progress +var Radio = forms.Radio +var SelectNative = forms.SelectNative +var SimpleGrid = layoutComponent.SimpleGrid +var Skeleton = feedback.Skeleton +var Slider = forms.Slider +var Spacer = layoutComponent.Spacer +var Spinner = feedback.Spinner +var Stack = layoutComponent.Stack +var Stat = data_display.Stat +var SwitchCmp = forms.SwitchCmp +var Tab = disclosure.Tab +var TabList = disclosure.TabList +var TabPanel = disclosure.TabPanel +var TabPanels = disclosure.TabPanels +var Table = data_display.Table +var Tabs = disclosure.Tabs +var Tag = data_display.Tag +var TextCmp = typography.TextCmp +var Textarea = forms.Textarea +var Toast = feedback.Toast +var Tooltip = overlays.Tooltip +var UseDisclosureComponents = disclosure.UseDisclosureComponents +var VisuallyHidden = disclosure.VisuallyHidden +var Wrap = layoutComponent.Wrap +var static = gomix.Static +var static_paths = gomix.StaticGenerationPath +var layout = gomix.PageLayout +var h1 = element.H1 +var h2 = element.H2 diff --git a/examples/docs/avatar.go b/examples/docs/avatar.go new file mode 100644 index 000000000..b22486dfe --- /dev/null +++ b/examples/docs/avatar.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderAvatar() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/media_and_icons" + +var Avatar = media_and_icons.Avatar`, nil), + Playground("Basic Usage", "Standard implementation of the Avatar component.", `Avatar()`, Avatar().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/badge.go b/examples/docs/badge.go new file mode 100644 index 000000000..8477617d4 --- /dev/null +++ b/examples/docs/badge.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderBadge() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/data_display" + +var Badge = data_display.Badge`, nil), + Playground("Basic Usage", "Standard implementation of the Badge component.", `Badge(text("New"))`, Badge(text("New")).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/button.go b/examples/docs/button.go new file mode 100644 index 000000000..fd54c628f --- /dev/null +++ b/examples/docs/button.go @@ -0,0 +1,40 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderButton() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/buttons" + +var Button = buttons.Button`, nil), + Playground("Basic Usage", "Standard implementation of the Button component.", `Button(text("Button")).ColorScheme("blue")`, Button(text("Button")).ColorScheme("blue").Component()), + Playground("Prop: Variant", "Demonstrating the Variant method.", `HStack( + Button(text("Button")).Variant("solid"), + Button(text("Button")).Variant("outline"), + Button(text("Button")).Variant("ghost") +)`, HStack(Button(text("Button")).Variant("solid").Component(), Button(text("Button")).Variant("outline").Component(), Button(text("Button")).Variant("ghost").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: Size", "Demonstrating the Size method.", `HStack( + Button(text("Button")).Size("sm"), + Button(text("Button")).Size("md"), + Button(text("Button")).Size("lg") +)`, HStack(Button(text("Button")).Size("sm").Component(), Button(text("Button")).Size("md").Component(), Button(text("Button")).Size("lg").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: ColorScheme", "Demonstrating the ColorScheme method.", `HStack( + Button(text("Button")).ColorScheme("blue"), + Button(text("Button")).ColorScheme("red"), + Button(text("Button")).ColorScheme("green") +)`, HStack(Button(text("Button")).ColorScheme("blue").Component(), Button(text("Button")).ColorScheme("red").Component(), Button(text("Button")).ColorScheme("green").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: IsLoading", "Demonstrating the IsLoading method.", `HStack( + Button(text("Button")).IsLoading(true), + Button(text("Button")).IsLoading(false) +)`, HStack(Button(text("Button")).IsLoading(true).Component(), Button(text("Button")).IsLoading(false).Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + PropsTable([]map[string]string{ + {"name": "Variant", "type": "v string", "description": "Chainable method for Variant setting Gomix attributes/styles."}, + {"name": "Size", "type": "s string", "description": "Chainable method for Size setting Gomix attributes/styles."}, + {"name": "ColorScheme", "type": "color string", "description": "Chainable method for ColorScheme setting Gomix attributes/styles."}, + {"name": "IsLoading", "type": "loading bool", "description": "Chainable method for IsLoading setting Gomix attributes/styles."}, + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/center.go b/examples/docs/center.go new file mode 100644 index 000000000..7108904d0 --- /dev/null +++ b/examples/docs/center.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderCenter() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout" + +var Center = layout.Center`, nil), + Playground("Basic Usage", "Standard implementation of the Center component.", `Center(text("Center"))`, Center(text("Center")).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/checkbox.go b/examples/docs/checkbox.go new file mode 100644 index 000000000..ba82c5e0c --- /dev/null +++ b/examples/docs/checkbox.go @@ -0,0 +1,34 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderCheckbox() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var Checkbox = forms.Checkbox`, nil), + Playground("Basic Usage", "Standard implementation of the Checkbox component.", `Checkbox()`, Checkbox().Component()), + Playground("Prop: ColorScheme", "Demonstrating the ColorScheme method.", `HStack( + Checkbox().ColorScheme("blue"), + Checkbox().ColorScheme("red"), + Checkbox().ColorScheme("green") +)`, HStack(Checkbox().ColorScheme("blue").Component(), Checkbox().ColorScheme("red").Component(), Checkbox().ColorScheme("green").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: Size", "Demonstrating the Size method.", `HStack( + Checkbox().Size("sm"), + Checkbox().Size("md"), + Checkbox().Size("lg") +)`, HStack(Checkbox().Size("sm").Component(), Checkbox().Size("md").Component(), Checkbox().Size("lg").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: IsInvalid", "Demonstrating the IsInvalid method.", `HStack( + Checkbox().IsInvalid(true), + Checkbox().IsInvalid(false) +)`, HStack(Checkbox().IsInvalid(true).Component(), Checkbox().IsInvalid(false).Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + PropsTable([]map[string]string{ + {"name": "ColorScheme", "type": "color string", "description": "Chainable method for ColorScheme setting Gomix attributes/styles."}, + {"name": "Size", "type": "s string", "description": "Chainable method for Size setting Gomix attributes/styles."}, + {"name": "IsInvalid", "type": "invalid bool", "description": "Chainable method for IsInvalid setting Gomix attributes/styles."}, + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/circularprogress.go b/examples/docs/circularprogress.go new file mode 100644 index 000000000..78cdfef2c --- /dev/null +++ b/examples/docs/circularprogress.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderCircularProgress() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/feedback" + +var CircularProgress = feedback.CircularProgress`, nil), + Playground("Basic Usage", "Standard implementation of the CircularProgress component.", `CircularProgress()`, CircularProgress().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/closebutton.go b/examples/docs/closebutton.go new file mode 100644 index 000000000..6b1328410 --- /dev/null +++ b/examples/docs/closebutton.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderCloseButton() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/buttons" + +var CloseButton = buttons.CloseButton`, nil), + Playground("Basic Usage", "Standard implementation of the CloseButton component.", `CloseButton()`, CloseButton().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/code.go b/examples/docs/code.go new file mode 100644 index 000000000..30ac89a04 --- /dev/null +++ b/examples/docs/code.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderCode() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/typography" + +var Code = typography.Code`, nil), + Playground("Basic Usage", "Standard implementation of the Code component.", `Code(text("fmt.Println(\"Hello\")"))`, Code(text("fmt.Println(\"Hello\")")).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/components.go b/examples/docs/components.go index cc4712cee..c793c7614 100644 --- a/examples/docs/components.go +++ b/examples/docs/components.go @@ -1,6 +1,7 @@ package main import ( + "github.com/raitucarp/gomix" "github.com/raitucarp/gomix/value" ) @@ -14,36 +15,21 @@ type DropdownData struct { } func ComponentContent(page *gomix.Page) isComponent { - return div( - - alpine( - div( - alpine( - button(text("Toggle Dropdown")), - ).On("click", "open = ! open"), + compParam := page.Param("component") + var compName string + if compParam != nil { + compName = compParam.(string) + } - alpine( - div(text("Dropdown Contents...")), - ).Show("open"), - ), - ).Data(&DropdownData{Open: false}), - - Accordion( - AccordionItem( - div(text("baraya")), - div(text("Content 1")), - ), - AccordionItem( - div(text("baraya2")), - div(text("Content 2")), - ), - AccordionItem( - div(text("babaa 3")), - div(text("Content 3")), - ), - ), - ) + rendered := Render(compName) + if rendered == nil { + rendered = div(text("Not implemented fully mapped for " + compName)) + } + return VStack( + Heading(text(compName)).Component().FontBold().TextXl(), + rendered, + ).Component().PBy(value.Rem(1)).GapBy(value.Rem(1)).WFull() } func ComponentsGallery(page *gomix.Page) isComponent { diff --git a/examples/docs/disclosure.go b/examples/docs/disclosure.go new file mode 100644 index 000000000..f8615a1d2 --- /dev/null +++ b/examples/docs/disclosure.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderDisclosure() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var Disclosure = disclosure.Disclosure`, nil), + Playground("Basic Usage", "Standard implementation of the Disclosure component.", `text("Not implemented")`, text("Not implemented yet")), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/divider.go b/examples/docs/divider.go new file mode 100644 index 000000000..e0312a101 --- /dev/null +++ b/examples/docs/divider.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderDivider() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/data_display" + +var Divider = data_display.Divider`, nil), + Playground("Basic Usage", "Standard implementation of the Divider component.", `Divider()`, Divider().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/drawer.go b/examples/docs/drawer.go new file mode 100644 index 000000000..7df56b86e --- /dev/null +++ b/examples/docs/drawer.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderDrawer() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/overlays" + +var Drawer = overlays.Drawer`, nil), + Playground("Basic Usage", "Standard implementation of the Drawer component.", `Drawer()`, Drawer().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/grid.go b/examples/docs/grid.go new file mode 100644 index 000000000..4f41c7592 --- /dev/null +++ b/examples/docs/grid.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderGrid() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout" + +var Grid = layout.Grid`, nil), + Playground("Basic Usage", "Standard implementation of the Grid component.", `Grid()`, Grid().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/heading.go b/examples/docs/heading.go new file mode 100644 index 000000000..09e16b4f2 --- /dev/null +++ b/examples/docs/heading.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderHeading() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/typography" + +var Heading = typography.Heading`, nil), + Playground("Basic Usage", "Standard implementation of the Heading component.", `Heading(text("Heading"))`, Heading(text("Heading")).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/hstack.go b/examples/docs/hstack.go new file mode 100644 index 000000000..91414c20b --- /dev/null +++ b/examples/docs/hstack.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderHStack() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout" + +var HStack = layout.HStack`, nil), + Playground("Basic Usage", "Standard implementation of the HStack component.", `HStack()`, HStack().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/icon.go b/examples/docs/icon.go new file mode 100644 index 000000000..4482bf173 --- /dev/null +++ b/examples/docs/icon.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderIcon() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/media_and_icons" + +var Icon = media_and_icons.Icon`, nil), + Playground("Basic Usage", "Standard implementation of the Icon component.", `Icon(fa_brand_android())`, Icon(fa_brand_android()).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/iconbutton.go b/examples/docs/iconbutton.go new file mode 100644 index 000000000..7cd079ea0 --- /dev/null +++ b/examples/docs/iconbutton.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderIconButton() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/buttons" + +var IconButton = buttons.IconButton`, nil), + Playground("Basic Usage", "Standard implementation of the IconButton component.", `IconButton(text("X"))`, IconButton(text("X")).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/image.go b/examples/docs/image.go new file mode 100644 index 000000000..b6326d07c --- /dev/null +++ b/examples/docs/image.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderImage() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/media_and_icons" + +var Image = media_and_icons.Image`, nil), + Playground("Basic Usage", "Standard implementation of the Image component.", `Image()`, Image().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/input.go b/examples/docs/input.go new file mode 100644 index 000000000..3e83f208d --- /dev/null +++ b/examples/docs/input.go @@ -0,0 +1,39 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderInput() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var Input = forms.Input`, nil), + Playground("Basic Usage", "Standard implementation of the Input component.", `Input()`, Input().Component()), + Playground("Prop: Variant", "Demonstrating the Variant method.", `HStack( + Input().Variant("solid"), + Input().Variant("outline"), + Input().Variant("ghost") +)`, HStack(Input().Variant("solid").Component(), Input().Variant("outline").Component(), Input().Variant("ghost").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: Size", "Demonstrating the Size method.", `HStack( + Input().Size("sm"), + Input().Size("md"), + Input().Size("lg") +)`, HStack(Input().Size("sm").Component(), Input().Size("md").Component(), Input().Size("lg").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: IsInvalid", "Demonstrating the IsInvalid method.", `HStack( + Input().IsInvalid(true), + Input().IsInvalid(false) +)`, HStack(Input().IsInvalid(true).Component(), Input().IsInvalid(false).Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: IsRequired", "Demonstrating the IsRequired method.", `HStack( + Input().IsRequired(true), + Input().IsRequired(false) +)`, HStack(Input().IsRequired(true).Component(), Input().IsRequired(false).Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + PropsTable([]map[string]string{ + {"name": "Variant", "type": "v string", "description": "Chainable method for Variant setting Gomix attributes/styles."}, + {"name": "Size", "type": "s string", "description": "Chainable method for Size setting Gomix attributes/styles."}, + {"name": "IsInvalid", "type": "invalid bool", "description": "Chainable method for IsInvalid setting Gomix attributes/styles."}, + {"name": "IsRequired", "type": "req bool", "description": "Chainable method for IsRequired setting Gomix attributes/styles."}, + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/kbd.go b/examples/docs/kbd.go new file mode 100644 index 000000000..e8652873a --- /dev/null +++ b/examples/docs/kbd.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderKbd() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/typography" + +var Kbd = typography.Kbd`, nil), + Playground("Basic Usage", "Standard implementation of the Kbd component.", `HStack(Kbd(text("Ctrl")), text("+"), Kbd(text("C")))`, HStack(Kbd(text("Ctrl")), text("+"), Kbd(text("C"))).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/main.go b/examples/docs/main.go index 8b27817d7..4cec7fdce 100644 --- a/examples/docs/main.go +++ b/examples/docs/main.go @@ -2,7 +2,6 @@ package main import ( "embed" - "flag" "log" "github.com/raitucarp/gomix" @@ -17,10 +16,10 @@ func check(err error) { } const ( - homePath = page_path("/") - componentListPath = page_path("/components/") - componentsPath = page_path("/components/{component}") - tutorialsPath = page_path("/tutorials") + homePath = page_path("/gomix/docs/") + componentListPath = page_path("/gomix/docs/components/") + componentsPath = page_path("/gomix/docs/components/{component}") + tutorialsPath = page_path("/gomix/docs/tutorials") ) //go:embed alpine @@ -71,7 +70,8 @@ func webSetup() gomix.AppParam { page_at(componentsPath, title_("{component} Component"), component(ComponentContent), - static_paths("/components/list", "/components/link", "/components/stack", "/components/card"), + static_paths("/gomix/docs/components/button", "/gomix/docs/components/close_button", "/gomix/docs/components/icon_button", "/gomix/docs/components/badge", "/gomix/docs/components/divider", "/gomix/docs/components/stat", "/gomix/docs/components/table", "/gomix/docs/components/tag", "/gomix/docs/components/accordion", "/gomix/docs/components/disclosure", "/gomix/docs/components/tabs", "/gomix/docs/components/visually_hidden", "/gomix/docs/components/alert", "/gomix/docs/components/circular_progress", "/gomix/docs/components/progress", "/gomix/docs/components/skeleton", "/gomix/docs/components/spinner", "/gomix/docs/components/toast", "/gomix/docs/components/checkbox", "/gomix/docs/components/input", "/gomix/docs/components/number_input", "/gomix/docs/components/pin_input", "/gomix/docs/components/radio", "/gomix/docs/components/select_native", "/gomix/docs/components/slider", "/gomix/docs/components/switch_cmp", "/gomix/docs/components/textarea", "/gomix/docs/components/center", "/gomix/docs/components/grid", "/gomix/docs/components/simple_grid", "/gomix/docs/components/spacer", "/gomix/docs/components/stack", "/gomix/docs/components/wrap", "/gomix/docs/components/avatar", "/gomix/docs/components/icon", "/gomix/docs/components/image", "/gomix/docs/components/alert_dialog", "/gomix/docs/components/drawer", "/gomix/docs/components/menu", "/gomix/docs/components/modal", "/gomix/docs/components/popover", "/gomix/docs/components/tooltip", "/gomix/docs/components/code", "/gomix/docs/components/heading", "/gomix/docs/components/kbd", "/gomix/docs/components/text_cmp"), + ), ), page_at(tutorialsPath, @@ -88,8 +88,6 @@ func webSetup() gomix.AppParam { } func main() { - isSsg := flag.Bool("ssg", false, "Enable SSG") - flag.Parse() appParams := []gomix.AppParam{ name("gomix Documentation"), @@ -99,11 +97,7 @@ func main() { webSetup(), } - if *isSsg { - appParams = append(appParams, static("./dist")) - } else { - appParams = append(appParams, port(8080)) - } + appParams = append(appParams, static("./dist")) app(appParams...) } diff --git a/examples/docs/menu.go b/examples/docs/menu.go new file mode 100644 index 000000000..45529a0ed --- /dev/null +++ b/examples/docs/menu.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderMenu() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/overlays" + +var Menu = overlays.Menu`, nil), + Playground("Basic Usage", "Standard implementation of the Menu component.", `Menu()`, Menu().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/modal.go b/examples/docs/modal.go new file mode 100644 index 000000000..33c931f32 --- /dev/null +++ b/examples/docs/modal.go @@ -0,0 +1,22 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderModal() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/overlays" + +var Modal = overlays.Modal`, nil), + Playground("Basic Usage", "Standard implementation of the Modal component.", `Modal()`, Modal().Component()), + Playground("Prop: IsOpen", "Demonstrating the IsOpen method.", `HStack( + Modal().IsOpen(true), + Modal().IsOpen(false) +)`, HStack(Modal().IsOpen(true).Component(), Modal().IsOpen(false).Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + PropsTable([]map[string]string{ + {"name": "IsOpen", "type": "isOpen bool", "description": "Chainable method for IsOpen setting Gomix attributes/styles."}, + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/numberinput.go b/examples/docs/numberinput.go new file mode 100644 index 000000000..5fbf1d043 --- /dev/null +++ b/examples/docs/numberinput.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderNumberInput() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var NumberInput = forms.NumberInput`, nil), + Playground("Basic Usage", "Standard implementation of the NumberInput component.", `NumberInput()`, NumberInput().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/pininput.go b/examples/docs/pininput.go new file mode 100644 index 000000000..570908d21 --- /dev/null +++ b/examples/docs/pininput.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderPinInput() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var PinInput = forms.PinInput`, nil), + Playground("Basic Usage", "Standard implementation of the PinInput component.", `PinInput()`, PinInput().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/popover.go b/examples/docs/popover.go new file mode 100644 index 000000000..91bfd9608 --- /dev/null +++ b/examples/docs/popover.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderPopover() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/overlays" + +var Popover = overlays.Popover`, nil), + Playground("Basic Usage", "Standard implementation of the Popover component.", `Popover()`, Popover().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/progress.go b/examples/docs/progress.go new file mode 100644 index 000000000..6a462b085 --- /dev/null +++ b/examples/docs/progress.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderProgress() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/feedback" + +var Progress = feedback.Progress`, nil), + Playground("Basic Usage", "Standard implementation of the Progress component.", `Progress()`, Progress().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/radio.go b/examples/docs/radio.go new file mode 100644 index 000000000..495504ea3 --- /dev/null +++ b/examples/docs/radio.go @@ -0,0 +1,29 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderRadio() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var Radio = forms.Radio`, nil), + Playground("Basic Usage", "Standard implementation of the Radio component.", `Radio()`, Radio().Component()), + Playground("Prop: ColorScheme", "Demonstrating the ColorScheme method.", `HStack( + Radio().ColorScheme("blue"), + Radio().ColorScheme("red"), + Radio().ColorScheme("green") +)`, HStack(Radio().ColorScheme("blue").Component(), Radio().ColorScheme("red").Component(), Radio().ColorScheme("green").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + Playground("Prop: Size", "Demonstrating the Size method.", `HStack( + Radio().Size("sm"), + Radio().Size("md"), + Radio().Size("lg") +)`, HStack(Radio().Size("sm").Component(), Radio().Size("md").Component(), Radio().Size("lg").Component()).Component().GapBy(value.Rem(1)).FlexWrap()), + PropsTable([]map[string]string{ + {"name": "ColorScheme", "type": "color string", "description": "Chainable method for ColorScheme setting Gomix attributes/styles."}, + {"name": "Size", "type": "s string", "description": "Chainable method for Size setting Gomix attributes/styles."}, + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/registry.go b/examples/docs/registry.go new file mode 100644 index 000000000..8a9691bc0 --- /dev/null +++ b/examples/docs/registry.go @@ -0,0 +1,116 @@ +package main + +import "github.com/raitucarp/gomix/components" + +func Render(componentName string) components.IsComponent { + switch componentName { + case "accordion_item": + return RenderAccordionItem() + case "skeleton": + return RenderSkeleton() + case "v_stack": + return RenderVStack() + case "tag": + return RenderTag() + case "icon": + return RenderIcon() + case "spacer": + return RenderSpacer() + case "pin_input": + return RenderPinInput() + case "tabs": + return RenderTabs() + case "modal": + return RenderModal() + case "spinner": + return RenderSpinner() + case "switch_cmp": + return RenderSwitchCmp() + case "toast": + return RenderToast() + case "checkbox": + return RenderCheckbox() + case "code": + return RenderCode() + case "tab": + return RenderTab() + case "circular_progress": + return RenderCircularProgress() + case "stat": + return RenderStat() + case "wrap": + return RenderWrap() + case "tooltip": + return RenderTooltip() + case "button": + return RenderButton() + case "table": + return RenderTable() + case "select_native": + return RenderSelectNative() + case "alert": + return RenderAlert() + case "tab_panels": + return RenderTabPanels() + case "visually_hidden": + return RenderVisuallyHidden() + case "tab_list": + return RenderTabList() + case "icon_button": + return RenderIconButton() + case "accordion": + return RenderAccordion() + case "disclosure": + return RenderDisclosure() + case "text_cmp": + return RenderTextCmp() + case "slider": + return RenderSlider() + case "menu": + return RenderMenu() + case "simple_grid": + return RenderSimpleGrid() + case "close_button": + return RenderCloseButton() + case "alert_dialog": + return RenderAlertDialog() + case "number_input": + return RenderNumberInput() + case "radio": + return RenderRadio() + case "textarea": + return RenderTextarea() + case "grid": + return RenderGrid() + case "progress": + return RenderProgress() + case "stack": + return RenderStack() + case "badge": + return RenderBadge() + case "h_stack": + return RenderHStack() + case "avatar": + return RenderAvatar() + case "heading": + return RenderHeading() + case "popover": + return RenderPopover() + case "divider": + return RenderDivider() + case "center": + return RenderCenter() + case "image": + return RenderImage() + case "drawer": + return RenderDrawer() + case "input": + return RenderInput() + case "kbd": + return RenderKbd() + case "tab_panel": + return RenderTabPanel() + default: + return nil + } +} diff --git a/examples/docs/selectnative.go b/examples/docs/selectnative.go new file mode 100644 index 000000000..c59ae72d7 --- /dev/null +++ b/examples/docs/selectnative.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderSelectNative() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var SelectNative = forms.SelectNative`, nil), + Playground("Basic Usage", "Standard implementation of the SelectNative component.", `SelectNative()`, SelectNative().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/shared.go b/examples/docs/shared.go new file mode 100644 index 000000000..446266dba --- /dev/null +++ b/examples/docs/shared.go @@ -0,0 +1,50 @@ +package main + +import ( + "github.com/raitucarp/gomix/element" + + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +var Td = element.Td +var Th = element.Th +var Tr = element.Tr +var Thead = element.THead +var Tbody = element.TBody + +func Playground(title string, description string, code string, child components.IsComponent) components.IsComponent { + var preview components.IsComponent = div() + if child != nil { + preview = VStack(child).Component().Border(value.Px(1)).BorderSlate(200).RoundedMd().PBy(value.Rem(1.5)).GapBy(value.Rem(1)).WFull() + } + + return VStack( + Heading(text(title)).Component().TextXl().FontBold(), + TextCmp(text(description)).Component().TextSm().TextColor(value.Hex("#666")), + preview, + VStack( + Heading(text("Code Example")).Component().TextLg().FontBold(), + Code(text(code)).Component().WFull().WhitespacePreWrap().PBy(value.Rem(1)).BgSlate(100).RoundedMd(), + ).Component().GapBy(value.Rem(0.5)).WFull().MtBy(value.Rem(1)), + ).Component().GapBy(value.Rem(0.5)).WFull() +} + +func PropsTable(methods []map[string]string) components.IsComponent { + rows := []element.IsElement{} + for _, m := range methods { + rows = append(rows, Tr( + Td(Code(text(m["name"])).Component()), + Td(TextCmp(text(m["type"])).Component()), + Td(TextCmp(text(m["description"])).Component()), + )) + } + + return VStack( + Heading(text("Props / Methods")).Component().TextXl().FontBold(), + Table( + Thead(Tr(Th(text("Method")), Th(text("Args")), Th(text("Description")))), + Tbody(rows...), + ).Component().WFull().Border(value.Px(1)).BorderSlate(200).RoundedMd(), + ).Component().GapBy(value.Rem(1)).WFull() +} diff --git a/examples/docs/sidebar.go b/examples/docs/sidebar.go index 8ab0d8bcc..208b7550a 100644 --- a/examples/docs/sidebar.go +++ b/examples/docs/sidebar.go @@ -12,17 +12,94 @@ type ComponentLink struct { var componentsGroup = []ComponentGroup{ { - label: "Typography", + label: "Buttons", + links: []ComponentLink{ + {label: "Button", url: "/gomix/docs/components/button"}, + {label: "Close Button", url: "/gomix/docs/components/close_button"}, + {label: "Icon Button", url: "/gomix/docs/components/icon_button"}, + }, + }, + { + label: "Data Display", + links: []ComponentLink{ + {label: "Badge", url: "/gomix/docs/components/badge"}, + {label: "Divider", url: "/gomix/docs/components/divider"}, + {label: "Stat", url: "/gomix/docs/components/stat"}, + {label: "Table", url: "/gomix/docs/components/table"}, + {label: "Tag", url: "/gomix/docs/components/tag"}, + }, + }, + { + label: "Disclosure", + links: []ComponentLink{ + {label: "Accordion", url: "/gomix/docs/components/accordion"}, + {label: "Disclosure", url: "/gomix/docs/components/disclosure"}, + {label: "Tabs", url: "/gomix/docs/components/tabs"}, + {label: "Visually Hidden", url: "/gomix/docs/components/visually_hidden"}, + }, + }, + { + label: "Feedback", + links: []ComponentLink{ + {label: "Alert", url: "/gomix/docs/components/alert"}, + {label: "Circular Progress", url: "/gomix/docs/components/circular_progress"}, + {label: "Progress", url: "/gomix/docs/components/progress"}, + {label: "Skeleton", url: "/gomix/docs/components/skeleton"}, + {label: "Spinner", url: "/gomix/docs/components/spinner"}, + {label: "Toast", url: "/gomix/docs/components/toast"}, + }, + }, + { + label: "Forms", links: []ComponentLink{ - {label: "List", url: "/components/list"}, - {label: "Link", url: "/components/link"}, + {label: "Checkbox", url: "/gomix/docs/components/checkbox"}, + {label: "Input", url: "/gomix/docs/components/input"}, + {label: "Number Input", url: "/gomix/docs/components/number_input"}, + {label: "Pin Input", url: "/gomix/docs/components/pin_input"}, + {label: "Radio", url: "/gomix/docs/components/radio"}, + {label: "Select Native", url: "/gomix/docs/components/select_native"}, + {label: "Slider", url: "/gomix/docs/components/slider"}, + {label: "Switch Cmp", url: "/gomix/docs/components/switch_cmp"}, + {label: "Textarea", url: "/gomix/docs/components/textarea"}, }, }, { label: "Layout", links: []ComponentLink{ - {label: "Stack", url: "/components/stack"}, - {label: "Card", url: "/components/card"}, + {label: "Center", url: "/gomix/docs/components/center"}, + {label: "Grid", url: "/gomix/docs/components/grid"}, + {label: "Simple Grid", url: "/gomix/docs/components/simple_grid"}, + {label: "Spacer", url: "/gomix/docs/components/spacer"}, + {label: "Stack", url: "/gomix/docs/components/stack"}, + {label: "Wrap", url: "/gomix/docs/components/wrap"}, + }, + }, + { + label: "Media And Icons", + links: []ComponentLink{ + {label: "Avatar", url: "/gomix/docs/components/avatar"}, + {label: "Icon", url: "/gomix/docs/components/icon"}, + {label: "Image", url: "/gomix/docs/components/image"}, + }, + }, + { + label: "Overlays", + links: []ComponentLink{ + {label: "Alert Dialog", url: "/gomix/docs/components/alert_dialog"}, + {label: "Drawer", url: "/gomix/docs/components/drawer"}, + {label: "Menu", url: "/gomix/docs/components/menu"}, + {label: "Modal", url: "/gomix/docs/components/modal"}, + {label: "Popover", url: "/gomix/docs/components/popover"}, + {label: "Tooltip", url: "/gomix/docs/components/tooltip"}, + }, + }, + { + label: "Typography", + links: []ComponentLink{ + {label: "Code", url: "/gomix/docs/components/code"}, + {label: "Heading", url: "/gomix/docs/components/heading"}, + {label: "Kbd", url: "/gomix/docs/components/kbd"}, + {label: "Text Cmp", url: "/gomix/docs/components/text_cmp"}, }, }, } diff --git a/examples/docs/simplegrid.go b/examples/docs/simplegrid.go new file mode 100644 index 000000000..639f5e4ad --- /dev/null +++ b/examples/docs/simplegrid.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderSimpleGrid() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout" + +var SimpleGrid = layout.SimpleGrid`, nil), + Playground("Basic Usage", "Standard implementation of the SimpleGrid component.", `SimpleGrid()`, SimpleGrid().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/skeleton.go b/examples/docs/skeleton.go new file mode 100644 index 000000000..1f6c0be22 --- /dev/null +++ b/examples/docs/skeleton.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderSkeleton() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/feedback" + +var Skeleton = feedback.Skeleton`, nil), + Playground("Basic Usage", "Standard implementation of the Skeleton component.", `Skeleton().Component()`, Skeleton().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/slider.go b/examples/docs/slider.go new file mode 100644 index 000000000..279333e4d --- /dev/null +++ b/examples/docs/slider.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderSlider() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var Slider = forms.Slider`, nil), + Playground("Basic Usage", "Standard implementation of the Slider component.", `Slider()`, Slider().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/spacer.go b/examples/docs/spacer.go new file mode 100644 index 000000000..26a389b69 --- /dev/null +++ b/examples/docs/spacer.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderSpacer() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout" + +var Spacer = layout.Spacer`, nil), + Playground("Basic Usage", "Standard implementation of the Spacer component.", `HStack(div(text("Left")), Spacer().Component(), div(text("Right"))).Component().WFull()`, HStack(div(text("Left")), Spacer().Component(), div(text("Right"))).Component().WFull()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/spinner.go b/examples/docs/spinner.go new file mode 100644 index 000000000..c1e6a4df0 --- /dev/null +++ b/examples/docs/spinner.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderSpinner() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/feedback" + +var Spinner = feedback.Spinner`, nil), + Playground("Basic Usage", "Standard implementation of the Spinner component.", `Spinner()`, Spinner().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/stack.go b/examples/docs/stack.go new file mode 100644 index 000000000..1251ccc26 --- /dev/null +++ b/examples/docs/stack.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderStack() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout" + +var Stack = layout.Stack`, nil), + Playground("Basic Usage", "Standard implementation of the Stack component.", `Stack()`, Stack().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/stat.go b/examples/docs/stat.go new file mode 100644 index 000000000..9eebc1006 --- /dev/null +++ b/examples/docs/stat.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderStat() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/data_display" + +var Stat = data_display.Stat`, nil), + Playground("Basic Usage", "Standard implementation of the Stat component.", `Stat()`, Stat().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/switchcmp.go b/examples/docs/switchcmp.go new file mode 100644 index 000000000..cf3de0de8 --- /dev/null +++ b/examples/docs/switchcmp.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderSwitchCmp() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var SwitchCmp = forms.SwitchCmp`, nil), + Playground("Basic Usage", "Standard implementation of the SwitchCmp component.", `SwitchCmp()`, SwitchCmp().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/tab.go b/examples/docs/tab.go new file mode 100644 index 000000000..713b9d2e1 --- /dev/null +++ b/examples/docs/tab.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTab() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var Tab = disclosure.Tab`, nil), + Playground("Basic Usage", "Standard implementation of the Tab component.", `Tab()`, Tab().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/table.go b/examples/docs/table.go new file mode 100644 index 000000000..92df616fd --- /dev/null +++ b/examples/docs/table.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTable() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/data_display" + +var Table = data_display.Table`, nil), + Playground("Basic Usage", "Standard implementation of the Table component.", `Table()`, Table().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/tablist.go b/examples/docs/tablist.go new file mode 100644 index 000000000..716407e9d --- /dev/null +++ b/examples/docs/tablist.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTabList() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var TabList = disclosure.TabList`, nil), + Playground("Basic Usage", "Standard implementation of the TabList component.", `TabList()`, TabList().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/tabpanel.go b/examples/docs/tabpanel.go new file mode 100644 index 000000000..4d7497cee --- /dev/null +++ b/examples/docs/tabpanel.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTabPanel() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var TabPanel = disclosure.TabPanel`, nil), + Playground("Basic Usage", "Standard implementation of the TabPanel component.", `TabPanel()`, TabPanel().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/tabpanels.go b/examples/docs/tabpanels.go new file mode 100644 index 000000000..c2d592f5d --- /dev/null +++ b/examples/docs/tabpanels.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTabPanels() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var TabPanels = disclosure.TabPanels`, nil), + Playground("Basic Usage", "Standard implementation of the TabPanels component.", `TabPanels()`, TabPanels().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/tabs.go b/examples/docs/tabs.go new file mode 100644 index 000000000..17ade5574 --- /dev/null +++ b/examples/docs/tabs.go @@ -0,0 +1,18 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTabs() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var Tabs = disclosure.Tabs`, nil), + Playground("Basic Usage", "Standard implementation of the Tabs component.", `Tabs()`, Tabs().Component()), + PropsTable([]map[string]string{ + {"name": "DefaultIndex", "type": "index int", "description": "Chainable method for DefaultIndex setting Gomix attributes/styles."}, + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/tag.go b/examples/docs/tag.go new file mode 100644 index 000000000..37627b27b --- /dev/null +++ b/examples/docs/tag.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTag() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/data_display" + +var Tag = data_display.Tag`, nil), + Playground("Basic Usage", "Standard implementation of the Tag component.", `Tag(text("Tag"))`, Tag(text("Tag")).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/textarea.go b/examples/docs/textarea.go new file mode 100644 index 000000000..0e6d1b27f --- /dev/null +++ b/examples/docs/textarea.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTextarea() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/forms" + +var Textarea = forms.Textarea`, nil), + Playground("Basic Usage", "Standard implementation of the Textarea component.", `Textarea()`, Textarea().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/textcmp.go b/examples/docs/textcmp.go new file mode 100644 index 000000000..a95318bd3 --- /dev/null +++ b/examples/docs/textcmp.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTextCmp() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/typography" + +var TextCmp = typography.TextCmp`, nil), + Playground("Basic Usage", "Standard implementation of the TextCmp component.", `TextCmp(text("Some text"))`, TextCmp(text("Some text")).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/toast.go b/examples/docs/toast.go new file mode 100644 index 000000000..8696ffd69 --- /dev/null +++ b/examples/docs/toast.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderToast() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/feedback" + +var Toast = feedback.Toast`, nil), + Playground("Basic Usage", "Standard implementation of the Toast component.", `Toast()`, Toast().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/tooltip.go b/examples/docs/tooltip.go new file mode 100644 index 000000000..1b451d170 --- /dev/null +++ b/examples/docs/tooltip.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderTooltip() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/overlays" + +var Tooltip = overlays.Tooltip`, nil), + Playground("Basic Usage", "Standard implementation of the Tooltip component.", `Tooltip()`, Tooltip().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/visuallyhidden.go b/examples/docs/visuallyhidden.go new file mode 100644 index 000000000..f336e7708 --- /dev/null +++ b/examples/docs/visuallyhidden.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderVisuallyHidden() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure" + +var VisuallyHidden = disclosure.VisuallyHidden`, nil), + Playground("Basic Usage", "Standard implementation of the VisuallyHidden component.", `VisuallyHidden(text("Hidden"))`, VisuallyHidden(text("Hidden")).Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/vstack.go b/examples/docs/vstack.go new file mode 100644 index 000000000..f23ff2d63 --- /dev/null +++ b/examples/docs/vstack.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderVStack() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout" + +var VStack = layout.VStack`, nil), + Playground("Basic Usage", "Standard implementation of the VStack component.", `VStack()`, VStack().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/examples/docs/wrap.go b/examples/docs/wrap.go new file mode 100644 index 000000000..f9f093265 --- /dev/null +++ b/examples/docs/wrap.go @@ -0,0 +1,17 @@ +package main + +import ( + "github.com/raitucarp/gomix/components" + "github.com/raitucarp/gomix/value" +) + +func RenderWrap() components.IsComponent { + return VStack( + Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout" + +var Wrap = layout.Wrap`, nil), + Playground("Basic Usage", "Standard implementation of the Wrap component.", `Wrap()`, Wrap().Component()), + PropsTable([]map[string]string{ + }), + ).Component().GapBy(value.Rem(2)) +} diff --git a/page.go b/page.go index 7929505a3..183dc35a5 100644 --- a/page.go +++ b/page.go @@ -135,6 +135,10 @@ func (page *Page) applyTitle(defaultTitle string, titleTemplate string) { page.titleTemplate = titleTemplate } +func (page *Page) Param(key string) any { + return page.params[key] +} + func (page *Page) Request() *http.Request { return page.request }