@startupjs-ui/content 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/content
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **content:** refactor Content component ([ad8cafd](https://github.com/startupjs/startupjs-ui/commit/ad8cafddbe01d30744efdf5eecfe3970247aa91a))

package/README.mdx

@@ -0,0 +1,193 @@
+import { u } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import Content, { _PropsJsonSchema as ContentPropsJsonSchema } from './index'
+import Br from '@startupjs-ui/br'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import './index.mdx.cssx.styl'
+
+# Content
+
+Content used as a parent container for the main content area of your app/website.
+
+It has good defaults for paddings from sides of the screen and by default limits the maximum width of the content
+to what is usually considered a comfortable reading width - `768px`, which is roughly the width of a tablet in portrait mode.
+
+```jsx
+import { Content } from 'startupjs-ui'
+```
+
+## Simple Example
+
+By default content has left and right paddings of `16px`.
+
+```jsx example
+const contentStyle = {
+  backgroundColor: '#2962FF'
+}
+const divStyle = {
+  height: u(25),
+  backgroundColor: '#00AED6',
+  alignItems: 'center',
+  justifyContent: 'center'
+}
+return (
+  <Content style={contentStyle}>
+    <Div style={divStyle}>
+      <Span>content</Span>
+    </Div>
+  </Content>
+)
+```
+
+## No horizontal paddings
+
+Pass `pure` property to remove left and right paddings. You would want to do this to keep the behaviour of
+limiting the maximum width of the Content (`768px` by default) while handling the internal paddings yourself.
+
+This is useful when creating lists, tables, or other components that on small screens need to look like they go
+all the way from left to right. While on the bigger screens you would still want to limit the maximum width of the content.
+
+```jsx example
+const contentStyle = {
+  backgroundColor: '#2962FF'
+}
+const divStyle = {
+  height: u(25),
+  backgroundColor: '#00AED6',
+  alignItems: 'center',
+  justifyContent: 'center'
+}
+return (
+  <Content style={contentStyle} pure>
+    <Div style={divStyle}>
+      <Span>content</Span>
+    </Div>
+  </Content>
+)
+```
+
+## Vertical paddings
+
+Top and bottom paddings can be added by passing the `padding` property to component.
+
+```jsx example
+const contentStyle = {
+  backgroundColor: '#2962FF'
+}
+const divStyle = {
+  height: u(25),
+  backgroundColor: '#00AED6',
+  alignItems: 'center',
+  justifyContent: 'center'
+}
+return (
+  <Content style={contentStyle} padding>
+    <Div style={divStyle}>
+      <Span>content</Span>
+    </Div>
+  </Content>
+)
+```
+
+## Full space
+
+Content takes the `full` property, which gives it all the empty space on the main `flexbox` axis of the parent.
+
+```jsx example
+const divStyle = {
+  height: u(25),
+  backgroundColor: '#2962FF'
+}
+const contentStyle = {
+  backgroundColor: '#00AED6',
+  alignItems: 'center',
+  justifyContent: 'center'
+}
+return (
+  <Div>
+    <Div style={divStyle}>
+      <Content style={contentStyle}>
+        <Span>Content without full</Span>
+      </Content>
+    </Div>
+    <Br />
+    <Div style={divStyle}>
+      <Content style={contentStyle} full>
+        <Span>Content with full</Span>
+      </Content>
+    </Div>
+  </Div>
+)
+```
+
+## Max width
+
+Content has limited max-width by default of `768px`, because we are making mobile first layout and can only go from smaller to larger screens by changing `width` property (possible values of property can be found in the `Sandbox` section at the bottom of the page). Also you can change the default width value for component by overriding `defaultWidth` property in your `$UI.Content.defaultWidth`. **We don't recommend to change the `defaultWidth` unnecessarily, because it is a more advanced setting that will change all your entire app.**
+
+```jsx example
+const contentStyle = {
+  backgroundColor: '#2962FF'
+}
+const divStyle = {
+  height: u(25),
+  backgroundColor: '#00AED6',
+  alignItems: 'center',
+  justifyContent: 'center'
+}
+return (
+  <Div>
+    <Content
+      style={contentStyle}
+      width='mobile'
+      padding
+    >
+      <Div style={divStyle}>
+        <Span>Mobile</Span>
+      </Div>
+    </Content>
+    <Br />
+    <Content
+      style={contentStyle}
+      padding
+    >
+      <Div style={divStyle}>
+        <Span>Tablet (default)</Span>
+      </Div>
+    </Content>
+    <Br />
+    <Content
+      style={contentStyle}
+      width='desktop'
+      padding
+    >
+      <Div style={divStyle}>
+        <Span>Desktop</Span>
+      </Div>
+    </Content>
+    <Br />
+    <Content
+      style={contentStyle}
+      width='wide'
+      padding
+    >
+      <Div style={divStyle}>
+        <Span>Full Width</Span>
+      </Div>
+    </Content>
+  </Div>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Content}
+  props={{
+    style: { backgroundColor: '#2962FF' },
+    children: <Div styleName='child' />,
+  }}
+  propsJsonSchema={ContentPropsJsonSchema}
+  rendererStyleName='renderer'
+  block
+/>

package/index.cssx.styl

@@ -0,0 +1,35 @@
+// ----- CONFIG: $UI.Content
+
+$this = merge({
+  defaultWidth: 'tablet'
+}, $UI.Content, true)
+
+// ----- COMPONENT
+
+_gutter = 2u
+
+.root
+  padding-left _gutter
+  padding-right @padding-left
+  align-self center
+  width 100%
+
+  &.pure
+    padding-left 0
+    padding-right 0
+
+  &.width
+    &-mobile
+      max-width: $UI.media.mobile
+    &-tablet
+      max-width: $UI.media.tablet
+    &-desktop
+      max-width: $UI.media.desktop
+    &-wide
+      max-width: $UI.media.wide
+    // &-full is without max-width
+
+// ----- JS EXPORTS
+
+:export
+  config: $this

package/index.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type DivProps } from '@startupjs-ui/div';
+declare const _default: import("react").ComponentType<ContentProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface ContentProps extends Omit<DivProps, 'style' | 'padding' | 'full'> {
+    /** Custom styles applied to the root view */
+    style?: DivProps['style'];
+    /** Content rendered inside wrapper */
+    children?: ReactNode;
+    /** Add equal top and bottom padding. true maps to default spacing @default false */
+    padding?: boolean | number;
+    /** Expand to take full available space in parent flex layout @default false */
+    full?: boolean;
+    /** Content width preset @default 'tablet' */
+    width?: 'mobile' | 'tablet' | 'desktop' | 'wide' | 'full';
+    /** Remove horizontal paddings */
+    pure?: boolean;
+}

package/index.mdx.cssx.styl

@@ -0,0 +1,6 @@
+.child
+  height 15u
+  background-color #00AED6
+
+.renderer
+  height 25u

package/index.tsx

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react'
+import { pug, observer, u } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import STYLES from './index.cssx.styl'
+
+const {
+  config: { defaultWidth }
+} = STYLES
+
+export default observer(themed('Content', Content))
+
+export const _PropsJsonSchema = {/* ContentProps */}
+
+export interface ContentProps extends Omit<DivProps, 'style' | 'padding' | 'full'> {
+  /** Custom styles applied to the root view */
+  style?: DivProps['style']
+  /** Content rendered inside wrapper */
+  children?: ReactNode
+  /** Add equal top and bottom padding. true maps to default spacing @default false */
+  padding?: boolean | number
+  /** Expand to take full available space in parent flex layout @default false */
+  full?: boolean
+  /** Content width preset @default 'tablet' */
+  width?: 'mobile' | 'tablet' | 'desktop' | 'wide' | 'full'
+  /** Remove horizontal paddings */
+  pure?: boolean
+}
+
+function Content ({
+  children,
+  padding = false,
+  pure,
+  width = defaultWidth,
+  full = false,
+  ...props
+}: ContentProps): ReactNode {
+  const _rootStyle: Record<string, any> = {}
+  if (padding === true) padding = 2
+  if (typeof padding === 'number') {
+    _rootStyle.paddingTop = u(padding)
+    _rootStyle.paddingBottom = u(padding)
+  }
+
+  return pug`
+    Div.root(
+      part='root'
+      style=_rootStyle
+      styleName=['width-' + width, { pure }]
+      full=full
+      ...props
+    )= children
+  `
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@startupjs-ui/content",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}