{props.title}
14 | {props.children} 15 |
8 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
9 | consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
10 | architecto doloribus aperiam sapiente, incidunt nihil suscipit
11 | voluptatibus tempore est dolor! Iusto, vero.
12 |
13 | {"With fraction of 2/3 and minItemWidth of 40ch"}
10 |{"With auto-start and minItemWidth of 30ch"}
15 |
13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
14 | consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
15 | architecto doloribus aperiam sapiente, incidunt nihil suscipit
16 | voluptatibus tempore est dolor! Iusto, vero.
17 |
18 |
6 | Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum elementum
7 | enim in pharetra. Curabitur eget urna cursus, imperdiet leo eu, elementum
8 | leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est vitae rutrum
9 | elementum. Donec dictum ex ac nibh auctor semper. Phasellus sed rhoncus
10 | arcu, eu consectetur ipsum. Ut dictum a elit at sollicitudin. Quisque sed
11 | augue molestie, auctor purus quis, luctus ipsum. Donec ultrices vel nisi
12 | vehicula facilisis. Vestibulum cursus nisi tellus, sit amet sagittis nisl
13 | luctus ut.
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/packages/solid/src/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import { JSXElement, createContext, useContext } from "solid-js";
2 |
3 | // eslint-disable-next-line @typescript-eslint/no-empty-interface
4 | export interface DefaultTheme {}
5 |
6 | const ThemeContext = createContext
6 | Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum elementum
7 | enim in pharetra. Curabitur eget urna cursus, imperdiet leo eu, elementum
8 | leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est vitae rutrum
9 | elementum. Donec dictum ex ac nibh auctor semper. Phasellus sed rhoncus
10 | arcu, eu consectetur ipsum. Ut dictum a elit at sollicitudin. Quisque sed
11 | augue molestie, auctor purus quis, luctus ipsum. Donec ultrices vel nisi
12 | vehicula facilisis. Vestibulum cursus nisi tellus, sit amet sagittis nisl
13 | luctus ut.
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/packages/appboundary/vite.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-var-requires */
2 | // vite.config.js
3 | const path = require("path");
4 | const { defineConfig } = require("vite");
5 |
6 | module.exports = defineConfig({
7 | build: {
8 | outDir: "./lib",
9 | lib: {
10 | entry: path.resolve(__dirname, "src/index.tsx"),
11 | name: "appboundary",
12 | formats: ["cjs", "umd", "es"],
13 | fileName: (format) => {
14 | return `index.${format === "es" ? "m" : format}.js`;
15 | },
16 | },
17 | rollupOptions: {
18 | external: [
19 | "react",
20 | "@bedrock-layout/type-utils",
21 | "@bedrock-layout/spacing-constants",
22 | "@bedrock-layout/center",
23 | ],
24 | },
25 | },
26 | });
27 |
--------------------------------------------------------------------------------
/packages/css/README.md:
--------------------------------------------------------------------------------
1 | # `@bedrock-layout/css`
2 |
3 | Pure CSS version of the Bedrock Layout Primitives
4 |
5 | Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)
6 |
7 | ## How to install
8 |
9 | `npm install @bedrock-layout/css`
10 |
11 | ## How to import
12 |
13 | You can import all the entire CSS bundle like this:
14 |
15 | ```javascript
16 | import '@bedrock-layout/css/lib/bedrock-layou.min.css';
17 | ```
18 |
19 | Or you can import just the parts you want from the components directory
20 |
21 | ```javascript
22 | import '@bedrock-layout/css/lib/components/spaceing-properties.min.css';
23 | import '@bedrock-layout/css/lib/reset.min.css';
24 | import '@bedrock-layout/css/lib/components/stack.min.css';
25 | import '@bedrock-layout/css/lib/components/center.min.css';
26 | ```
27 |
--------------------------------------------------------------------------------
/packages/solid-doc-site/src/pages/CoverPage/playground.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/style-prop-object */
2 | import { Cover, CoverProps } from "@bedrock-layout/solid";
3 | import { JSXElement } from "solid-js";
4 |
5 | export function Playground(props: Readonly{props.bottom}
}
11 | >
12 |
13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
14 | consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
15 | architecto doloribus aperiam sapiente, incidunt nihil suscipit
16 | voluptatibus tempore est dolor! Iusto, vero.
17 |
18 |
15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
16 | consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
17 | architecto doloribus aperiam sapiente, incidunt nihil suscipit
18 | voluptatibus tempore est dolor! Iusto, vero.
19 |
20 | start
10 |end
17 |all
24 |2 index
31 |{/* */}
30 |{/* */}
31 |
13 | Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum
14 | elementum enim in pharetra. Curabitur eget urna cursus, imperdiet leo
15 | eu, elementum leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est
16 | vitae rutrum elementum. Donec dictum ex ac nibh auctor semper. Phasellus
17 | sed rhoncus arcu, eu consectetur ipsum. Ut dictum a elit at
18 | sollicitudin. Quisque sed augue molestie, auctor purus quis, luctus
19 | ipsum. Donec ultrices vel nisi vehicula facilisis. Vestibulum cursus
20 | nisi tellus, sit amet sagittis nisl luctus ut.
21 |
22 | {/* */}
30 |{/* */}
31 |{/* */}
30 |{/* */}
31 |
9 | Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum
10 | elementum enim in pharetra. Curabitur eget urna cursus, imperdiet leo
11 | eu, elementum leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est
12 | vitae rutrum elementum. Donec dictum ex ac nibh auctor semper. Phasellus
13 | sed rhoncus arcu, eu consectetur ipsum. Ut dictum a elit at
14 | sollicitudin. Quisque sed augue molestie, auctor purus quis, luctus
15 | ipsum. Donec ultrices vel nisi vehicula facilisis. Vestibulum cursus
16 | nisi tellus, sit amet sagittis nisl luctus ut.
17 |
18 | With an object of values
9 |
10 |
11 | {JSON.stringify(
12 | { top: "size3", inlineEnd: "size7", blockEnd: "size1" },
13 | null,
14 | 3,
15 | )}
16 |
17 |
18 |
9 | Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum
10 | elementum enim in pharetra. Curabitur eget urna cursus, imperdiet leo
11 | eu, elementum leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est
12 | vitae rutrum elementum. Donec dictum ex ac nibh auctor semper. Phasellus
13 | sed rhoncus arcu, eu consectetur ipsum. Ut dictum a elit at
14 | sollicitudin. Quisque sed augue molestie, auctor purus quis, luctus
15 | ipsum. Donec ultrices vel nisi vehicula facilisis. Vestibulum cursus
16 | nisi tellus, sit amet sagittis nisl luctus ut.
17 |
18 |
17 | Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum
18 | elementum enim in pharetra. Curabitur eget urna cursus, imperdiet leo
19 | eu, elementum leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est
20 | vitae rutrum elementum. Donec dictum ex ac nibh auctor semper. Phasellus
21 | sed rhoncus arcu, eu consectetur ipsum. Ut dictum a elit at
22 | sollicitudin. Quisque sed augue molestie, auctor purus quis, luctus
23 | ipsum. Donec ultrices vel nisi vehicula facilisis. Vestibulum cursus
24 | nisi tellus, sit amet sagittis nisl luctus ut.
25 |
26 | start
11 |end
17 |center
23 |stretch
29 |{...content}
;
29 | };
30 | ```
31 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [[redirects]]
2 | force = true
3 | from = "/src-components-use-forwarded-ref"
4 | status = 301
5 | to = "/?path=/docs/hooks-useforwardedref--docs"
6 |
7 | [[redirects]]
8 | force = true
9 | from = "/sb-addons/.storybook/manager-bundle.css"
10 | status = 301
11 | to = "/sb-addons/storybook/manager-bundle.css"
12 |
13 | [[redirects]]
14 | force = true
15 | from = "/sb-addons/.storybook/manager-bundle.css.LEGAL.txt"
16 | status = 301
17 | to = "/sb-addons/storybook/manager-bundle.css.LEGAL.txt"
18 |
19 | [[redirects]]
20 | force = true
21 | from = "/sb-addons/.storybook/manager-bundle.css.map"
22 | status = 301
23 | to = "/sb-addons/storybook/manager-bundle.css.map"
24 |
25 | [[redirects]]
26 | force = true
27 | from = "/sb-addons/.storybook/manager-bundle.mjs"
28 | status = 301
29 | to = "/sb-addons/storybook/manager-bundle.mjs"
30 |
31 | [[redirects]]
32 | force = true
33 | from = "/sb-addons/.storybook/manager-bundle.mjs.LEGAL.txt"
34 | status = 301
35 | to = "/sb-addons/storybook/manager-bundle.mjs.LEGAL.txt"
36 |
37 | [[redirects]]
38 | force = true
39 | from = "/sb-addons/.storybook/manager-bundle.mjs.map"
40 | status = 301
41 | to = "/sb-addons/storybook/manager-bundle.mjs.map"
42 |
--------------------------------------------------------------------------------
/packages/solid-doc-site/src/pages/ReelPage/snap.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/style-prop-object */
2 | import { Reel } from "@bedrock-layout/solid";
3 | import { JSXElement } from "solid-js";
4 |
5 | import { Box } from "../../components/Box";
6 | import { colors } from "./colors";
7 |
8 | export function SnapType(): JSXElement {
9 | return (
10 | <>
11 | none
12 |scroll to the right to see the next item
13 |mandatory
19 |scroll to the right to see the next item
20 |proximity
26 |scroll to the right to see the next item
27 |start
11 |end
17 |center
23 |stretch
29 |1/4
10 |1/3
15 |1/2
20 |2/3
25 |3/4
30 |auto-start
35 |(The first box has a width of 100px)
36 |auto-end
41 |(The second box has a width of 100px)
42 |{/* */}
34 |{/* */}
35 |1
32 | 2
33 | 3
34 | 4
35 | 5
36 | 6
37 |
30 | }
31 | ```
32 |
33 | Or you can provide a range
34 |
35 | ```javascript
36 | import { useContainerQuery } from '@bedrock-layout/use-container-query';
37 |
38 | const Div = React.forwardRef(props,ref)=>{
39 | const [node,setRef] = React.useState(null)
40 | const matches = useContainerQuery(node, 320, 640)
41 | // do something with matches
42 | return
43 | }
44 | ```
45 |
--------------------------------------------------------------------------------
/stories/inline/argTypes.ts:
--------------------------------------------------------------------------------
1 | export const argTypes = {
2 | gutter: {
3 | control: "select",
4 | options: [
5 | "size000",
6 | "size00",
7 | "size1",
8 | "size2",
9 | "size3",
10 | "size4",
11 | "size5",
12 | "size6",
13 | "size7",
14 | "size8",
15 | "size9",
16 | "size10",
17 | "size11",
18 | "size12",
19 | "size13",
20 | "size14",
21 | "size15",
22 | ],
23 | },
24 | gap: {
25 | control: "select",
26 | options: [
27 | "size000",
28 | "size00",
29 | "size1",
30 | "size2",
31 | "size3",
32 | "size4",
33 | "size5",
34 | "size6",
35 | "size7",
36 | "size8",
37 | "size9",
38 | "size10",
39 | "size11",
40 | "size12",
41 | "size13",
42 | "size14",
43 | "size15",
44 | ],
45 | },
46 | justify: {
47 | control: "select",
48 | options: ["start", "end", "center", "space-between", "space-around"],
49 | },
50 | align: {
51 | control: "select",
52 | options: ["start", "end", "center", "stretch"],
53 | },
54 | stretch: {
55 | control: "select",
56 | options: ["all", "start", "end"],
57 | },
58 | switchAt: {
59 | description:
60 | "Sets the width threshold that the split will switch to a Stack layout",
61 | control: "text",
62 | },
63 | minItemWidth: {
64 | control: "text",
65 | },
66 | };
67 |
--------------------------------------------------------------------------------
/packages/primitives/vite.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-var-requires */
2 | // vite.config.js
3 | const path = require("path");
4 | const { defineConfig } = require("vite");
5 |
6 | module.exports = defineConfig({
7 | build: {
8 | outDir: "./lib",
9 | lib: {
10 | entry: path.resolve(__dirname, "src/index.tsx"),
11 | name: "solid",
12 | formats: ["cjs", "umd", "es"],
13 | fileName: (format) => {
14 | return `index.${format === "es" ? "m" : format}.js`;
15 | },
16 | },
17 | rollupOptions: {
18 | external: [
19 | "react",
20 | "@bedrock-layout/appboundary",
21 | "@bedrock-layout/center",
22 | "@bedrock-layout/column-drop",
23 | "@bedrock-layout/columns",
24 | "@bedrock-layout/cover",
25 | "@bedrock-layout/frame",
26 | "@bedrock-layout/grid",
27 | "@bedrock-layout/inline",
28 | "@bedrock-layout/inline-cluster",
29 | "@bedrock-layout/masonry-grid",
30 | "@bedrock-layout/padbox",
31 | "@bedrock-layout/reel",
32 | "@bedrock-layout/spacing-constants",
33 | "@bedrock-layout/split",
34 | "@bedrock-layout/stack",
35 | "@bedrock-layout/type-utils",
36 | "@bedrock-layout/use-container-query",
37 | "@bedrock-layout/use-forwarded-ref",
38 | "@bedrock-layout/use-resize-observer",
39 | "@bedrock-layout/use-stateful-ref",
40 | ],
41 | },
42 | },
43 | });
44 |
--------------------------------------------------------------------------------
/stories/columns/argTypes.ts:
--------------------------------------------------------------------------------
1 | export const columnsArgTypes = {
2 | gutter: {
3 | control: "select",
4 | options: [
5 | "size000",
6 | "size00",
7 | "size1",
8 | "size2",
9 | "size3",
10 | "size4",
11 | "size5",
12 | "size6",
13 | "size7",
14 | "size8",
15 | "size9",
16 | "size10",
17 | "size11",
18 | "size12",
19 | "size13",
20 | "size14",
21 | "size15",
22 | ],
23 | },
24 | gap: {
25 | control: "select",
26 | options: [
27 | "size000",
28 | "size00",
29 | "size1",
30 | "size2",
31 | "size3",
32 | "size4",
33 | "size5",
34 | "size6",
35 | "size7",
36 | "size8",
37 | "size9",
38 | "size10",
39 | "size11",
40 | "size12",
41 | "size13",
42 | "size14",
43 | "size15",
44 | ],
45 | },
46 | colCount: {
47 | control: "number",
48 | },
49 | switchAt: {
50 | control: "text",
51 | },
52 | as: {
53 | control: "none",
54 | },
55 | };
56 |
57 | export const columnArgTypes = {
58 | span: {
59 | table: {
60 | type: { summary: "number" },
61 | },
62 | control: "number",
63 | },
64 | offsetStart: {
65 | table: {
66 | type: { summary: "number" },
67 | },
68 | control: "number",
69 | },
70 | offsetEnd: {
71 | table: {
72 | type: { summary: "number" },
73 | },
74 | control: "number",
75 | },
76 | };
77 |
--------------------------------------------------------------------------------
/packages/solid-doc-site/src/pages/InlineClusterPage/justify.tsx:
--------------------------------------------------------------------------------
1 | import { InlineCluster } from "@bedrock-layout/solid";
2 | import { JSXElement } from "solid-js";
3 |
4 | import { Box } from "../../components/Box";
5 |
6 | export function Justify(): JSXElement {
7 | return (
8 | <>
9 |
11 |
16 |
18 |
23 |
25 |
30 |
32 |
37 |
39 |
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/packages/solid/src/create-container-query.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | init,
3 | registerCallback,
4 | } from "@bedrock-layout/register-resize-callback";
5 | import {
6 | Accessor,
7 | Setter,
8 | createEffect,
9 | createSignal,
10 | onCleanup,
11 | onMount,
12 | } from "solid-js";
13 |
14 | import { convertToMaybe } from "./typeUtils";
15 |
16 | /**
17 | * @deprecated this function is deprecated and will be removed in the next major version
18 | */
19 | export function createContainerQuery(
20 | width: number,
21 | maybeRef?: (ref: T) => unknown,
22 | ): [Accessor, Setter] {
23 | const [matches, setMatch] = createSignal(false);
24 | const [node, nodeRef] = createSignal();
25 |
26 | onMount(() => {
27 | init();
28 | });
29 |
30 | createEffect(() => {
31 | if (convertToMaybe(node()) === undefined) return;
32 |
33 | if (maybeRef) {
34 | maybeRef(node() as T);
35 | }
36 |
37 | const cleanup = registerCallback(node() as T, (entry) => {
38 | //fix typings
39 | const nodeWidth =
40 | (entry.borderBoxSize as unknown as ResizeObserverSize)?.inlineSize ??
41 | entry.contentRect.width;
42 |
43 | //nodeWidth can be zero when it is switching from one node to another. This will ignore that.
44 | if (nodeWidth > 0) {
45 | const newMatch = nodeWidth <= width;
46 |
47 | setMatch(newMatch);
48 | }
49 | });
50 |
51 | onCleanup(cleanup);
52 | });
53 |
54 | return [matches, nodeRef];
55 | }
56 |
--------------------------------------------------------------------------------
/packages/stack/README.md:
--------------------------------------------------------------------------------
1 | # `@bedrock-layout/stack`
2 |
3 | A layout helper component that creates a vertical stack layout with gutters (spacing) between each item.
4 |
5 | Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)
6 |
7 | ---
8 |
9 | ## When to Use
10 |
11 | The `Stack` component literally stacks its child components on top of each other, while maintaining a consistent spacing between them.
12 |
13 | ---
14 |
15 | ## How to install
16 |
17 | `npm install @bedrock-layout/stack`
18 |
19 | or
20 |
21 | `yarn add @bedrock-layout/stack`
22 |
23 | ---
24 |
25 | ## Usage
26 |
27 | ```javascript
28 | import { Stack } from "@bedrock-layout/stack";
29 |
30 |
31 | ;
38 | ```
39 |
40 | ---
41 |
42 | ## data-attribute
43 |
44 | For styling purposes, you can select `data-br-stack`.
45 |
46 | ---
47 |
48 | ## API
49 |
50 | \* required
51 |
52 | | Property | Description | Type | Default |
53 | | :------: | :-----------------------------------------: | :------------------: | :-----: |
54 | | gutter\* | Sets the space between each child component | one of `Spacing`\*\* | - |
55 |
56 | \*\* By default, `Spacing` is one of the [spacing-constants](https://github.com/Bedrock-Layouts/Bedrock/tree/main/packages/spacing-constants) values, but this can be overwritten using the `ThemeProvider` from `@bedrock-layout/spacing-constants`
57 |
--------------------------------------------------------------------------------
/.storybook/main.ts:
--------------------------------------------------------------------------------
1 | import { dirname, join } from "path";
2 |
3 | import type { InlineConfig } from "vite";
4 |
5 | const turbosnap = require("vite-plugin-turbosnap");
6 |
7 | export const stories = [
8 | "./pages/Landing.mdx",
9 | "./pages/introduction.mdx",
10 | "./pages/installation.mdx",
11 | "./pages/stack.mdx",
12 | "./pages/spacing.mdx",
13 | "./pages/menu.mdx",
14 | "./pages/hero.mdx",
15 | "./pages/new-arrivals.mdx",
16 | "../stories/**/*.@(mdx|stories.@(js|ts|tsx))",
17 | "./pages/contributing.mdx",
18 | "./pages/roadmap.mdx",
19 | "../examples/examples.mdx",
20 | "../examples/web.dev.mdx",
21 | ];
22 | export const addons = [
23 | getAbsolutePath("@storybook/addon-essentials"),
24 | getAbsolutePath("@chromaui/addon-visual-tests"),
25 | getAbsolutePath("@storybook/addon-mdx-gfm"),
26 | ];
27 |
28 | export const staticDirs = ["../public"];
29 |
30 | export const viteFinal = async (config: InlineConfig, { configType }) => {
31 | // Turbosnap is only useful when building for production
32 | if (configType === "PRODUCTION") {
33 | config.plugins?.push(
34 | turbosnap({
35 | rootDir: config.root,
36 | }),
37 | );
38 | }
39 | return config;
40 | };
41 |
42 | export const framework = {
43 | name: getAbsolutePath("@storybook/react-vite"),
44 | options: {},
45 | };
46 |
47 | export const docs = {
48 | autodocs: true,
49 | toc: true,
50 | };
51 |
52 | function getAbsolutePath(value: string): string {
53 | return dirname(require.resolve(join(value, "package.json")));
54 | }
55 |
--------------------------------------------------------------------------------
/packages/padbox/README.md:
--------------------------------------------------------------------------------
1 | # `@bedrock-layout/padbox`
2 |
3 | A layout helper component that creates vertical stack layout with gutters.
4 |
5 | Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)
6 |
7 | ---
8 |
9 | ## When to Use
10 |
11 | `Padbox` component creates a uniform padding based on the spacing constants. It can either take a single value or an array/object of values to fine-tune the padding.
12 |
13 | ---
14 |
15 | ## How to install
16 |
17 | `npm install @bedrock-layout/padbox`
18 |
19 | or
20 |
21 | `yarn add @bedrock-layout/padbox`
22 |
23 | ---
24 |
25 | ## Usage
26 |
27 | ```javascript
28 | import { Padbox } from '@bedrock-layout/padbox';
29 |
30 | {...content} ;
31 | ```
32 |
33 | ---
34 |
35 | ## data-attribute
36 |
37 | For styling purposes, you can select `data-bedrock-padbox`.
38 |
39 | ---
40 |
41 | ## API
42 |
43 | \* required
44 |
45 | | Property | Description | Type | Default |
46 | | :-------: | :------------------------------------------------: | :---------------------------------------------------------------: | :-----: |
47 | | padding\* | sets the padding around the content of the element | `Spacing`\*\*, array of `Spacings`, or object of `Spacing` values | - |
48 |
49 | \*\* By default, `Spacing` is one of the [spacing-constants](https://github.com/Bedrock-Layouts/Bedrock/tree/main/packages/spacing-constants) values, but this can be overwritten using the `ThemeProvider` from `@bedrock-layout/spacing-constants`
50 |
--------------------------------------------------------------------------------
/packages/solid-doc-site/src/pages/ColumnsPage/argTypes.ts:
--------------------------------------------------------------------------------
1 | import { spacing } from "@bedrock-layout/solid";
2 | import { ArgType } from "src/types/argType";
3 |
4 | export const argTypes: ArgType = {
5 | gap: {
6 | description: "Sets space between each element",
7 | summary: "Space",
8 | defaultValue: "0px",
9 | initialValue: "size3",
10 | control: "select",
11 | options: Object.keys(spacing),
12 | },
13 | colCount: {
14 | description: "Sets the number of columns",
15 | defaultValue: "1",
16 | initialValue: 4,
17 | summary: "number",
18 | control: "number",
19 | },
20 | switchAt: {
21 | description:
22 | "Sets the width threshold that the split will switch to a Stack layout",
23 | summary: "string | number",
24 | control: "text",
25 | initialValue: "25rem",
26 | },
27 | };
28 |
29 | export const columnArgTypes: ArgType = {
30 | span: {
31 | description: "Sets the number of columns the element will span",
32 | summary: "number",
33 | defaultValue: "1",
34 | initialValue: 1,
35 | control: "number",
36 | },
37 | offsetStart: {
38 | description:
39 | "Sets the number of columns the element will offset before the element",
40 | summary: "number",
41 | defaultValue: "-",
42 | initialValue: 0,
43 | control: "number",
44 | },
45 | offsetEnd: {
46 | description:
47 | "Sets the number of columns the element will offset after the element",
48 | summary: "number",
49 | defaultValue: "-",
50 | initialValue: 0,
51 | control: "number",
52 | },
53 | };
54 |
--------------------------------------------------------------------------------
/.github/workflows/verify.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: Build
5 |
6 | on:
7 | push:
8 | branches: [main]
9 | pull_request:
10 | branches: [main]
11 |
12 | jobs:
13 | build:
14 | runs-on: ubuntu-latest
15 | env:
16 | HUSKY: 0
17 | NPM_AUTH: ${{secrets.NPM_AUTH}}
18 | GH_TOKEN: ${{secrets.GH_TOKEN}}
19 | strategy:
20 | matrix:
21 | node-version: [22.x]
22 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
23 |
24 | steps:
25 | - uses: actions/checkout@v4
26 | with:
27 | fetch-depth: "0"
28 | - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
29 | - run: yarn config set registry https://registry.npmjs.org
30 | - run: yarn
31 | - run: yarn verify
32 | - run: git checkout main
33 | - run: git config --global user.email 'travis.mair@gmail.com'
34 | - run: git config --global user.name 'Jarvis1010'
35 | - if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
36 | run: echo "//registry.npmjs.org/:_authToken=${{secrets.NPM_AUTH}}" > ~/.npmrc
37 | - if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
38 | run: npm whoami
39 | - if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
40 | run: npx lerna publish --conventional-commits --yes
41 |
--------------------------------------------------------------------------------
/packages/css/src/components/frame.css:
--------------------------------------------------------------------------------
1 | /*
2 | frame.css
3 | */
4 |
5 | [data-bedrock-frame] {
6 | box-sizing: border-box;
7 | display: block;
8 | inline-size: 100%;
9 | position: relative;
10 | overflow: hidden;
11 | }
12 |
13 | [data-bedrock-frame] > * {
14 | position: absolute;
15 |
16 | inset-block-start: 0;
17 | inset-block-end: 0;
18 | inset-inline-start: 0;
19 | inset-inline-end: 0;
20 |
21 | inset-block: 0;
22 | inset-inline: 0;
23 |
24 | display: flex;
25 | justify-content: center;
26 | align-items: center;
27 | }
28 |
29 | [data-bedrock-frame] > :is(img, video) {
30 | inline-size: 100%;
31 | block-size: 100%;
32 | size: 100%;
33 |
34 | object-fit: cover;
35 |
36 | object-position: var(--position, "50%");
37 | }
38 |
39 | [data-bedrock-frame][style*="--ratio"] {
40 | aspect-ratio: var(--ratio);
41 | }
42 |
43 | /*
44 | frame.css
45 | */
46 |
47 | [data-br-frame] {
48 | box-sizing: border-box;
49 | display: block;
50 | inline-size: 100%;
51 | position: relative;
52 | overflow: hidden;
53 | }
54 |
55 | [data-br-frame] > * {
56 | position: absolute;
57 |
58 | inset-block-start: 0;
59 | inset-block-end: 0;
60 | inset-inline-start: 0;
61 | inset-inline-end: 0;
62 |
63 | inset-block: 0;
64 | inset-inline: 0;
65 |
66 | display: flex;
67 | justify-content: center;
68 | align-items: center;
69 | }
70 |
71 | [data-br-frame] > :is(img, video) {
72 | inline-size: 100%;
73 | block-size: 100%;
74 | size: 100%;
75 |
76 | object-fit: cover;
77 |
78 | object-position: var(--position, "50%");
79 | }
80 |
81 | [data-br-frame][style*="--ratio"] {
82 | aspect-ratio: var(--ratio);
83 | }
84 |
--------------------------------------------------------------------------------
/packages/reel/README.md:
--------------------------------------------------------------------------------
1 | # `@bedrock-layout/reel`
2 |
3 | A layout helper for scrolling content
4 |
5 | Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)
6 |
7 | ---
8 |
9 | ## When to Use
10 |
11 | `Reel` component designs and organizes your content into scrollable flatlists, A.K.A Carousels. It also adds convenient breakpoints in the flatlists, hence providing a natural way to scroll through content.
12 |
13 | ---
14 |
15 | ## How to install
16 |
17 | `npm install @bedrock-layout/reel`
18 |
19 | or
20 |
21 | `yarn add @bedrock-layout/reel`
22 |
23 | ## Usage
24 |
25 | ```javascript
26 | import { Reel } from "@bedrock-layout/reel";
27 |
28 |
29 | ;
36 | ```
37 |
38 | ---
39 |
40 | ## data-attribute
41 |
42 | For styling purposes, you can select `data-br-reel`.
43 |
44 | ---
45 |
46 | ## API
47 |
48 | \* required
49 |
50 | | Property | Description | Type | Default |
51 | | :------: | :---------------------------------------: | :--------------------------------: | :-----: |
52 | | gutter\* | Sets the space between each child element | one of `Spacing`\*\* | - |
53 | | snapType | Controls horizontal snap type | `none`, `mandatory` or `proximity` | 'none' |
54 |
55 | \*\* By default, `Spacing` is one of [spacing-constants](https://github.com/Bedrock-Layouts/Bedrock/tree/main/packages/spacing-constants) values, but it can be overwritten using the `ThemeProvider` from `@bedrock-layout/spacing-constants`
56 |
--------------------------------------------------------------------------------
/packages/solid-doc-site/src/pages/InlinePage/argTypes.ts:
--------------------------------------------------------------------------------
1 | import { spacing } from "@bedrock-layout/solid";
2 | import { ArgType } from "src/types/argType";
3 |
4 | export const argTypes: ArgType = {
5 | gap: {
6 | description: "Sets space between each element",
7 | summary: "Space",
8 | defaultValue: "0px",
9 | initialValue: "size3",
10 | control: "select",
11 | options: Object.keys(spacing),
12 | },
13 | minItemWidth: {
14 | description: "Sets the basis of each of the children",
15 | summary: "CSSLength",
16 | defaultValue: "0px",
17 | initialValue: "100px",
18 | control: "text",
19 | },
20 | justify: {
21 | description: "Sets the inline justification of the children",
22 | summary: "start | end | center",
23 | defaultValue: "start",
24 | initialValue: "start",
25 | control: "select",
26 | options: ["start", "end", "center"],
27 | },
28 | align: {
29 | description: "Sets the block alignment of the children",
30 | summary: "start | end | center | stretch",
31 | defaultValue: "start",
32 | initialValue: "start",
33 | control: "select",
34 | options: ["start", "end", "center", "stretch"],
35 | },
36 | stretch: {
37 | description: "Sets which child will stretch in the inline direction",
38 | summary: "all | start | end or index of child",
39 | defaultValue: "-",
40 | initialValue: "-",
41 | control: "select",
42 | options: ["-", "all", "start", "end"],
43 | },
44 | switchAt: {
45 | description:
46 | "Sets the width threshold that the split will switch to a Stack layout",
47 | summary: "string | number",
48 | control: "text",
49 | initialValue: "25rem",
50 | },
51 | };
52 |
--------------------------------------------------------------------------------
/packages/stack/src/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Gutter,
3 | getSafeGutter,
4 | useTheme,
5 | } from "@bedrock-layout/spacing-constants";
6 | import { forwardRefWithAs } from "@bedrock-layout/type-utils";
7 | import React from "react";
8 |
9 | /**
10 | * Props for Stack component.
11 | */
12 | export interface StackProps {
13 | /**
14 | * Sets space between each element.
15 | * @deprecated Use `gap` instead.
16 | */
17 | gutter?: Gutter;
18 | /**
19 | * Sets space between each element.
20 | */
21 | gap?: Gutter;
22 |
23 | /**
24 | * The `align` prop can be used to specify the inline alignment of the children.
25 | */
26 | align?: "start" | "center" | "end" | "stretch";
27 | }
28 |
29 | function createAttributeString(
30 | prefix: string,
31 | value: string | number | undefined,
32 | ) {
33 | if (value === undefined) return undefined;
34 |
35 | return `${prefix}:${value}`;
36 | }
37 |
38 | /**
39 | * The `Stack` is designed to literally stack items on top of each other while maintaining a consistent gutter between each item.
40 | */
41 | export const Stack = forwardRefWithAs<"div", StackProps>(function Stack(
42 | { as: Component = "div", gutter, gap, align, style = {}, ...props },
43 | ref,
44 | ) {
45 | const theme = useTheme();
46 |
47 | const alignValue = createAttributeString("align", align);
48 |
49 | const maybeGutter = getSafeGutter(theme, gap ?? gutter);
50 |
51 | const attributes = [alignValue].filter(Boolean).join(" ");
52 |
53 | return (
54 |
31 | ;
38 | ```
39 |
40 | ---
41 |
42 | ## data-attribute
43 |
44 | For styling purposes, you can select `data-br-grid`.
45 |
46 | ---
47 |
48 | ## API
49 |
50 | \* required
51 |
52 | | Property | Description | Type | Default |
53 | | :----------: | :-------------------------------------------: | :------------------------------------: | :-----------: |
54 | | gutter\* | sets the space between each child element | One of `Spacing`\*\* | - |
55 | | minItemWidth | sets the min width size of each child element | number or valid CSS length as a string | small (639px) |
56 |
57 | \*\* By default, `Spacing` is one of [spacing-constants](https://github.com/Bedrock-Layouts/Bedrock/tree/main/packages/spacing-constants) values, but this can be overwritten using the `ThemeProvider` from `@bedrock-layout/spacing-constants`
58 |
--------------------------------------------------------------------------------
/packages/reel/src/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Gutter,
3 | getSafeGutter,
4 | useTheme,
5 | } from "@bedrock-layout/spacing-constants";
6 | import { forwardRefWithAs } from "@bedrock-layout/type-utils";
7 | import React, { CSSProperties } from "react";
8 |
9 | /**
10 | * Props for the Reel component.
11 | */
12 | export type ReelProps = {
13 | /**
14 | * Sets the scroll snap type.
15 | */
16 | snapType?: "none" | "proximity" | "mandatory";
17 | /**
18 | * Sets space between each element.
19 | * @deprecated Use `gap` instead.
20 | */
21 | gutter?: Gutter;
22 | /**
23 | * Sets space between each element.
24 | */
25 | gap?: Gutter;
26 | };
27 |
28 | function createAttributeString(
29 | prefix: string,
30 | value: string | number | undefined,
31 | ) {
32 | if (value === undefined) return undefined;
33 |
34 | return `${prefix}:${value}`;
35 | }
36 |
37 | /**
38 | * Scrolling is a popular and natural way to interact with
39 | * web content. The `Reel` component is designed to organize
40 | * content into scrollable horizontal list with convenient scroll
41 | * snap points.
42 | */
43 | export const Reel = forwardRefWithAs<"div", ReelProps>(function Reel(
44 | { as: Component = "div", snapType, gutter, gap, style = {}, ...props },
45 | ref,
46 | ) {
47 | const theme = useTheme();
48 | const maybeGutter = getSafeGutter(theme, gap ?? gutter);
49 |
50 | const attributeString = [createAttributeString("snapType", snapType)]
51 | .filter(Boolean)
52 | .join(" ");
53 |
54 | return (
55 |
start
10 |end
17 |center
24 |space-around
31 |space-between
38 |1
32 | 2
33 | 3
34 | 4
35 | 5
36 | 6
37 | 1
30 | 2
31 | 3
32 | 4
33 | 5
34 | 6
35 | 1
32 | 2
33 | 3
34 | 4
35 | 5
36 | 6
37 |
31 | }
32 | ```
33 |
34 | Optionally, if you already have a node from a ref you are using you can pass it in as a second argument. **Note:** If you choose to use it this way, the node must be stateful either by using `@bedrock-layout/use-stateful-ref` or using a `React.useState` hook with the ref. If you are using the returned ref object, the node passed in will be ignored.
35 |
36 | ```javascript
37 | import { useResizeObserver } from '@bedrock-layout/use-resize-observer';
38 | import { useStatefulRef } from '@bedrock-layout/use-stateful-ref';
39 |
40 | function Component(props){
41 | const statefulRef = useStatefulRef()
42 | const ref = useResizeObserver((entry) => {
43 | /* do something with entry */
44 | }, statefulRef.current)
45 |
46 | return
47 | }
48 | ```
49 |
--------------------------------------------------------------------------------
/packages/stack/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/stack",
3 | "version": "3.3.4",
4 | "description": "bedrock-layout stack layout primitive",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "stack",
12 | "layout",
13 | "react"
14 | ],
15 | "author": "Jarvis1010 ",
16 | "homepage": "https://bedrock-layout.dev/",
17 | "license": "MIT",
18 | "unpkg": "lib/index.umd.js",
19 | "main": "lib/index.umd.js",
20 | "umd:main": "lib/index.umd.js",
21 | "module": "lib/index.m.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "dependencies": {
39 | "@bedrock-layout/spacing-constants": "^3.3.10",
40 | "@bedrock-layout/type-utils": "^0.1.14"
41 | },
42 | "peerDependencies": {
43 | "@bedrock-layout/css": "^2.1.0",
44 | "react": "^16.8 || ^17 || ^18"
45 | },
46 | "repository": {
47 | "type": "git",
48 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
49 | },
50 | "scripts": {
51 | "test": "echo \"Error: run tests from root\" && exit 1",
52 | "lint": "eslint --ignore-path .gitignore .",
53 | "clean:build": "rimraf lib",
54 | "build": "vite build && tsc --emitDeclarationOnly"
55 | },
56 | "bugs": {
57 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
58 | },
59 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
60 | "nx": {}
61 | }
62 |
--------------------------------------------------------------------------------
/packages/solid-doc-site/src/pages/PadBoxPage/paddingArray.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/style-prop-object */
2 | import { PadBox } from "@bedrock-layout/solid";
3 | import { JSXElement } from "solid-js";
4 |
5 | export function PaddingArray(): JSXElement {
6 | return (
7 | <>
8 |
11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
12 | consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
13 | architecto doloribus aperiam sapiente, incidunt nihil suscipit
14 | voluptatibus tempore est dolor! Iusto, vero.
15 |
16 |
22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
23 | consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
24 | architecto doloribus aperiam sapiente, incidunt nihil suscipit
25 | voluptatibus tempore est dolor! Iusto, vero.
26 |
27 |
33 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
34 | consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
35 | architecto doloribus aperiam sapiente, incidunt nihil suscipit
36 | voluptatibus tempore est dolor! Iusto, vero.
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/packages/spacing-constants/__tests__/__snapshots__/spacing-constants.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`Spacing Constants > constant snapshot 1`] = `
4 | {
5 | "ThemeContext": {
6 | "$$typeof": Symbol(react.context),
7 | "Consumer": {
8 | "$$typeof": Symbol(react.context),
9 | "_context": [Circular],
10 | },
11 | "Provider": {
12 | "$$typeof": Symbol(react.provider),
13 | "_context": [Circular],
14 | },
15 | "_currentRenderer": null,
16 | "_currentRenderer2": null,
17 | "_currentValue": {},
18 | "_currentValue2": {},
19 | "_defaultValue": null,
20 | "_globalName": null,
21 | "_threadCount": 0,
22 | },
23 | "ThemeProvider": [Function],
24 | "getSafeGutter": [Function],
25 | "getSizeValue": [Function],
26 | "getSpacingValue": [Function],
27 | "sizes": {
28 | "sizeContent1": "20ch",
29 | "sizeContent2": "45ch",
30 | "sizeContent3": "60ch",
31 | "sizeHeader1": "20ch",
32 | "sizeHeader2": "25ch",
33 | "sizeHeader3": "35ch",
34 | "sizeLg": "1024px",
35 | "sizeMd": "768px",
36 | "sizeSm": "480px",
37 | "sizeXl": "1440px",
38 | "sizeXs": "360px",
39 | "sizeXxl": "1920px",
40 | "sizeXxs": "240px",
41 | },
42 | "spacing": {
43 | "size00": "-.25rem",
44 | "size000": "-.5rem",
45 | "size1": ".25rem",
46 | "size10": "5rem",
47 | "size11": "7.5rem",
48 | "size12": "10rem",
49 | "size13": "15rem",
50 | "size14": "20rem",
51 | "size15": "30rem",
52 | "size2": ".5rem",
53 | "size3": "1rem",
54 | "size4": "1.25rem",
55 | "size5": "1.5rem",
56 | "size6": "1.75rem",
57 | "size7": "2rem",
58 | "size8": "3rem",
59 | "size9": "4rem",
60 | },
61 | "useTheme": [Function],
62 | }
63 | `;
64 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.build.json",
3 | "compilerOptions": {
4 | "types": ["vitest/globals"],
5 | "baseUrl": ".",
6 | "paths": {
7 | "@bedrock-layout/appboundary": ["packages/appboundary/src"],
8 | "@bedrock-layout/center": ["packages/center/src"],
9 | "@bedrock-layout/column-drop": ["packages/column-drop/src"],
10 | "@bedrock-layout/columns": ["packages/columns/src"],
11 | "@bedrock-layout/cover": ["packages/cover/src"],
12 | "@bedrock-layout/css-reset": ["packages/css-reset/src"],
13 | "@bedrock-layout/frame": ["packages/frame/src"],
14 | "@bedrock-layout/grid": ["packages/grid/src"],
15 | "@bedrock-layout/inline": ["packages/inline/src"],
16 | "@bedrock-layout/inline-cluster": ["packages/inline-cluster/src"],
17 | "@bedrock-layout/masonry-grid": ["packages/masonry-grid/src"],
18 | "@bedrock-layout/padbox": ["packages/padbox/src"],
19 | "@bedrock-layout/reel": ["packages/reel/src"],
20 | "@bedrock-layout/register-resize-callback": [
21 | "packages/register-resize-callback/src"
22 | ],
23 | "@bedrock-layout/stack": ["packages/stack/src"],
24 | "@bedrock-layout/spacing-constants": ["packages/spacing-constants/src"],
25 | "@bedrock-layout/split": ["packages/split/src"],
26 | "@bedrock-layout/type-utils": ["packages/type-utils/src"],
27 | "@bedrock-layout/use-container-query": [
28 | "packages/use-container-query/src"
29 | ],
30 | "@bedrock-layout/use-forwarded-ref": ["packages/use-forwarded-ref/src"],
31 | "@bedrock-layout/use-resize-observer": [
32 | "packages/use-resize-observer/src"
33 | ],
34 | "@bedrock-layout/use-stateful-ref": ["packages/use-stateful-ref/src"],
35 | "$test/*": ["test/*"]
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/spacing-constants/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/spacing-constants",
3 | "version": "3.3.10",
4 | "description": "bedrock-layout spacing constants",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "spacing",
12 | "constants"
13 | ],
14 | "author": "Jarvis1010 ",
15 | "homepage": "https://bedrock-layout.dev/",
16 | "license": "MIT",
17 | "unpkg": "lib/index.umd.js",
18 | "main": "lib/index.umd.js",
19 | "umd:main": "lib/index.umd.js",
20 | "module": "lib/index.m.js",
21 | "source": "src/index.tsx",
22 | "types": "lib/index.d.ts",
23 | "exports": {
24 | ".": {
25 | "types": "./lib/index.d.ts",
26 | "import": "./lib/index.m.js",
27 | "require": "./lib/index.umd.js"
28 | }
29 | },
30 | "directories": {
31 | "lib": "lib",
32 | "test": "__tests__"
33 | },
34 | "files": [
35 | "lib"
36 | ],
37 | "peerDependencies": {
38 | "react": "^16.8 || ^17 || ^18"
39 | },
40 | "repository": {
41 | "type": "git",
42 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
43 | },
44 | "scripts": {
45 | "test": "echo \"Error: run tests from root\" && exit 1",
46 | "lint": "eslint --ignore-path .gitignore .",
47 | "clean:build": "rimraf lib",
48 | "build": "vite build && tsc --emitDeclarationOnly",
49 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
50 | "fix-format": "yarn prettier --write",
51 | "check-format": "yarn prettier --list-different",
52 | "check-types": "tsc --noEmit"
53 | },
54 | "bugs": {
55 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
56 | },
57 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
58 | "nx": {}
59 | }
60 |
--------------------------------------------------------------------------------
/packages/type-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/type-utils",
3 | "version": "0.1.14",
4 | "description": "bedrock-layout type utils",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "type utils",
12 | "react",
13 | "hook",
14 | "useRef"
15 | ],
16 | "author": "Jarvis1010 ",
17 | "homepage": "https://bedrock-layout.dev/",
18 | "license": "MIT",
19 | "unpkg": "lib/index.umd.js",
20 | "main": "lib/index.umd.js",
21 | "umd:main": "lib/index.umd.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "repository": {
39 | "type": "git",
40 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
41 | },
42 | "scripts": {
43 | "test": "echo \"Error: run tests from root\" && exit 1",
44 | "lint": "eslint --ignore-path .gitignore . --no-error-on-unmatched-pattern",
45 | "clean:build": "rimraf lib",
46 | "build": "vite build && tsc --emitDeclarationOnly",
47 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
48 | "fix-format": "yarn prettier --write",
49 | "check-format": "yarn prettier --list-different",
50 | "check-types": "tsc --noEmit"
51 | },
52 | "bugs": {
53 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
54 | },
55 | "peerDependencies": {
56 | "react": "^16.8 || ^17 || ^18"
57 | },
58 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
59 | "nx": {}
60 | }
61 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Bedrock Layout
2 |
3 | Thank you for taking the time to contribute! 🎉
4 |
5 | There are many ways to contribute to the Bedrock Layout Primitives. The most common is to fork the repository and make your own changes. You can also contribute directly to the discussions at the [GitHub repository](https://github.com/Bedrock-Layouts/Bedrock/discussions/categories/general) or you can create an [issue](https://github.com/Bedrock-Layouts/Bedrock/issues) to discuss the changes or problems you find.
6 |
7 | ## Contributing Code
8 |
9 | When contributing code to Bedrock Layout Primitives, please first create an [issue](https://github.com/Bedrock-Layouts/Bedrock/issues) to discuss the changes.
10 |
11 | Bedrock Layout Primitives is a monorepo of packages that are currently versioned independently of each other. It also utilizes Storybook as a documentation website.
12 |
13 | To manage all of these things, Bedrock uses Lerna to manage all the repositories into one monorepo. Lerna is used to publish to NPM, tag releases to Github, and process change logs under each package. To make the above possible in CI, Bedrock has adopted conventional commits and uses commitizen and husky to enforce it.
14 |
15 | To make a pull request, do the following:
16 |
17 | 1. Fork the repository.
18 | 1. Clone the repository from your GitHub.
19 | 1. Set up your environment with `yarn`
20 | 1. Check out a new branch and add your modification.
21 | 1. Add test cases for all your changes.
22 | 1. Update any README.md and documentation in Storybook under the examples folder in the corresponding package.
23 | 1. Use commitizen to do git commit by running `yarn cz` (be sure to stage your changes first). Doing this will automatically run `yarn verify` as a pre-commit hook when you do this. If anything fails, fix and follow this step again.
24 | 1. **DO NOT BUMP ANY VERSION NUMBERS OR UPDATE CHANGELOG.**
25 | 1. Send a pull request 🙏
26 |
--------------------------------------------------------------------------------
/packages/frame/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/frame",
3 | "version": "3.2.14",
4 | "description": "bedrock-layout frame",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "frame",
12 | "layout",
13 | "react"
14 | ],
15 | "author": "Jarvis1010 ",
16 | "homepage": "https://bedrock-layout.dev/",
17 | "license": "MIT",
18 | "unpkg": "lib/index.umd.js",
19 | "main": "lib/index.umd.js",
20 | "umd:main": "lib/index.umd.js",
21 | "module": "lib/index.m.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "dependencies": {
39 | "@bedrock-layout/type-utils": "^0.1.14"
40 | },
41 | "peerDependencies": {
42 | "@bedrock-layout/css": "^2.1.0",
43 | "react": "^16.8 || ^17 || ^18"
44 | },
45 | "repository": {
46 | "type": "git",
47 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
48 | },
49 | "scripts": {
50 | "test": "echo \"Error: run tests from root\" && exit 1",
51 | "lint": "eslint --ignore-path .gitignore .",
52 | "clean:build": "rimraf lib",
53 | "build": "vite build && tsc --emitDeclarationOnly",
54 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
55 | "fix-format": "yarn prettier --write",
56 | "check-format": "yarn prettier --list-different",
57 | "check-types": "tsc --noEmit"
58 | },
59 | "bugs": {
60 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
61 | },
62 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
63 | "nx": {}
64 | }
65 |
--------------------------------------------------------------------------------
/packages/solid/src/stack.tsx:
--------------------------------------------------------------------------------
1 | import { JSX, mergeProps } from "solid-js";
2 |
3 | import { SpacingOptions, getSpacingValue } from "./spacing-constants";
4 | import { useTheme } from "./theme-provider";
5 | import createDynamic, {
6 | DynamicProps,
7 | HeadlessPropsWithRef,
8 | ValidConstructor,
9 | createPropsFromAccessors,
10 | omitProps,
11 | } from "./typeUtils";
12 |
13 | const alignMap = {
14 | start: "align:start",
15 | end: "align:end",
16 | center: "align:center",
17 | stretch: "align:stretch",
18 | } as const;
19 |
20 | export interface StackPropsBase {
21 | /**
22 | * @deprecated Use `gap` instead
23 | */
24 | gutter?: SpacingOptions;
25 | gap?: SpacingOptions;
26 | align?: keyof typeof alignMap;
27 | }
28 |
29 | export type StackProps =
30 | HeadlessPropsWithRef;
31 |
32 | export function Stack(
33 | props: Readonly>,
34 | ): JSX.Element {
35 | const theme = useTheme();
36 | const propsStyle = () =>
37 | typeof props.style === "string"
38 | ? props.style
39 | : Object.entries(props.style ?? ({} as JSX.CSSProperties)).reduce(
40 | (str, [key, value]) => str + `${key}:${value};`,
41 | "",
42 | );
43 |
44 | const gutter = () =>
45 | `--gutter: ${
46 | getSpacingValue(theme, props.gap ?? props.gutter ?? "size00") ?? "0px"
47 | }`;
48 |
49 | const style = () => [propsStyle(), gutter()].join("; ");
50 |
51 | const align = () =>
52 | props.align !== undefined ? alignMap[props.align] : undefined;
53 |
54 | const attrAssessor = () => [align()].filter(Boolean).join(" ");
55 |
56 | return createDynamic(
57 | () => props.as ?? ("div" as T),
58 | mergeProps(
59 | omitProps(props, ["as", "gutter"]),
60 | createPropsFromAccessors({ style, "data-br-stack": attrAssessor }),
61 | ) as DynamicProps,
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/packages/solid/src/center.tsx:
--------------------------------------------------------------------------------
1 | import { JSX, mergeProps } from "solid-js";
2 |
3 | import { CSSLength } from "./spacing-constants";
4 | import createDynamic, {
5 | DynamicProps,
6 | HeadlessPropsWithRef,
7 | ValidConstructor,
8 | createPropsFromAccessors,
9 | omitProps,
10 | } from "./typeUtils";
11 |
12 | function getSafeMaxWidth(maxWidth?: MaxWidth) {
13 | if (maxWidth === undefined) return "100%";
14 | if (typeof maxWidth === "number") return `${maxWidth}px`;
15 | return maxWidth;
16 | }
17 |
18 | type MaxWidth = number | CSSLength;
19 |
20 | export interface CenterBaseProps {
21 | maxWidth?: MaxWidth;
22 | centerText?: boolean;
23 | centerChildren?: boolean;
24 | }
25 |
26 | export type CenterProps =
27 | HeadlessPropsWithRef;
28 |
29 | export function Center(
30 | props: Readonly>,
31 | ): JSX.Element {
32 | const propsStyle = () =>
33 | typeof props.style === "string"
34 | ? props.style
35 | : Object.entries(props.style ?? ({} as JSX.CSSProperties)).reduce(
36 | (str, [key, value]) => str + `${key}:${value};`,
37 | "",
38 | );
39 |
40 | const maxWidth = () => `--maxWidth: ${getSafeMaxWidth(props.maxWidth)};`;
41 |
42 | const centerText = () => (props.centerText ? "center-text" : "");
43 |
44 | const centerChildren = () => (props.centerChildren ? "center-children" : "");
45 |
46 | const attrString = () =>
47 | [centerText(), centerChildren()].filter(Boolean).join(" ");
48 |
49 | const style = () => [propsStyle(), maxWidth()].join("; ");
50 |
51 | return createDynamic(
52 | () => props.as ?? ("div" as T),
53 | mergeProps(
54 | omitProps(props, ["as", "maxWidth", "centerText", "centerChildren"]),
55 | createPropsFromAccessors({
56 | style,
57 | "data-br-center": attrString,
58 | }),
59 | ) as DynamicProps,
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/packages/column-drop/README.md:
--------------------------------------------------------------------------------
1 | # `@bedrock-layout/column-drop`
2 |
3 | Layout helper that creates column-drop of items
4 |
5 | Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)
6 |
7 | ## When to Use
8 |
9 | Used to create a column-drop layouts
10 |
11 | ## How to install
12 |
13 | `npm install @bedrock-layout/column-drop`
14 |
15 | ## Usage
16 |
17 | ```javascript
18 | import ColumnDrop from "@bedrock-layout/column-drop";
19 |
20 |
21 | Lorem ipsum dolor
22 | sit amet consectetur
23 | adipisicing elit.
24 | ;
25 | ```
26 |
27 | ## data-attribute
28 |
29 | For purposes of styling you can select `data-br-column-drop`.
30 |
31 | ## API
32 |
33 | \* required
34 |
35 | | Property | Description | Type | Default |
36 | | -------- | ----------------------------------------------------------- | --------------------------------------------- | ------- |
37 | | gutter\* | sets space inbetween each element | one of spacing\*\* | - |
38 | | stretch | child or children that will stretch to fill available space | One of: `all, start, end, index of the child` | - |
39 | | justify | Inline alignment | One of: `start, end, center` | `start` |
40 | | align | Block alignment | One of: `start, end, center` | `start` |
41 | | switchAt | The width that the container will switch to stacking | One of: `CSS length, number` | - |
42 |
43 | \*\* By default, spacings are one of the [spacing-constants](https://github.com/Bedrock-Layouts/Bedrock/tree/main/packages/spacing-constants), but can be overridden using the `ThemeProvider` from `@bedrock-layout/spacing-constants`
44 |
--------------------------------------------------------------------------------
/packages/grid/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/grid",
3 | "version": "4.4.4",
4 | "description": "bedrock-layout grid",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "grid",
12 | "layout",
13 | "react"
14 | ],
15 | "author": "Jarvis1010 ",
16 | "homepage": "https://bedrock-layout.dev/",
17 | "license": "MIT",
18 | "unpkg": "lib/index.umd.js",
19 | "main": "lib/index.umd.js",
20 | "umd:main": "lib/index.umd.js",
21 | "module": "lib/index.m.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "dependencies": {
39 | "@bedrock-layout/spacing-constants": "^3.3.10",
40 | "@bedrock-layout/type-utils": "^0.1.14"
41 | },
42 | "peerDependencies": {
43 | "@bedrock-layout/css": "^2.1.0",
44 | "react": "^16.8 || ^17 || ^18"
45 | },
46 | "repository": {
47 | "type": "git",
48 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
49 | },
50 | "scripts": {
51 | "test": "echo \"Error: run tests from root\" && exit 1",
52 | "lint": "eslint --ignore-path .gitignore .",
53 | "clean:build": "rimraf lib",
54 | "build": "vite build && tsc --emitDeclarationOnly",
55 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
56 | "fix-format": "yarn prettier --write",
57 | "check-format": "yarn prettier --list-different",
58 | "check-types": "tsc --noEmit"
59 | },
60 | "bugs": {
61 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
62 | },
63 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
64 | "nx": {}
65 | }
66 |
--------------------------------------------------------------------------------
/packages/cover/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/cover",
3 | "version": "3.5.4",
4 | "description": "bedrock-layout cover",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "cover",
12 | "layout",
13 | "react"
14 | ],
15 | "author": "Jarvis1010 ",
16 | "homepage": "https://bedrock-layout.dev/",
17 | "license": "MIT",
18 | "unpkg": "lib/index.umd.js",
19 | "main": "lib/index.umd.js",
20 | "umd:main": "lib/index.umd.js",
21 | "module": "lib/index.m.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "dependencies": {
39 | "@bedrock-layout/spacing-constants": "^3.3.10",
40 | "@bedrock-layout/type-utils": "^0.1.14"
41 | },
42 | "peerDependencies": {
43 | "@bedrock-layout/css": "^2.1.0",
44 | "react": "^16.8 || ^17 || ^18"
45 | },
46 | "repository": {
47 | "type": "git",
48 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
49 | },
50 | "scripts": {
51 | "test": "echo \"Error: run tests from root\" && exit 1",
52 | "lint": "eslint --ignore-path .gitignore .",
53 | "clean:build": "rimraf lib",
54 | "build": "vite build && tsc --emitDeclarationOnly",
55 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
56 | "fix-format": "yarn prettier --write",
57 | "check-format": "yarn prettier --list-different",
58 | "check-types": "tsc --noEmit"
59 | },
60 | "bugs": {
61 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
62 | },
63 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
64 | "nx": {}
65 | }
66 |
--------------------------------------------------------------------------------
/packages/inline-cluster/README.md:
--------------------------------------------------------------------------------
1 | # `@bedrock-layout/inline-cluster`
2 |
3 | InlineCluster is a layout helper component that displays items in a row.
4 |
5 | Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)
6 |
7 | ---
8 |
9 | ## When to Use
10 |
11 | The `InclineCluster` component can be used to create inline-cluster layouts where items are displayed in a single row. If the number of items is too large, then they are displayed in a cluster with respect to the container's width and the cluster's justification (start, end, or center).
12 |
13 | ---
14 |
15 | ## How to install
16 |
17 | `npm install @bedrock-layout/inline-cluster`
18 |
19 | or
20 |
21 | `yarn add @bedrock-layout/inline-cluster`
22 |
23 | ---
24 |
25 | ## Usage
26 |
27 | ```javascript
28 | import { InlineCluster } from "@bedrock-layout/inline-cluster";
29 |
30 |
31 | Lorem ipsum dolor
32 | sit amet consectetur
33 | adipisicing elit.
34 | ;
35 | ```
36 |
37 | ---
38 |
39 | ## data-attribute
40 |
41 | For styling purposes, you can select `data-br-inline-cluster`.
42 |
43 | ---
44 |
45 | ## API
46 |
47 | \* required
48 |
49 | | Property | Description | Type | Default |
50 | | :------: | :-------------------------------------------: | :--------------------------: | :-----: |
51 | | gutter\* | Sets the space between each child element | one of `Spacing`\*\* | - |
52 | | justify | Sets the inline justification of the children | One of: `start, end, center` | `start` |
53 | | align | Sets the block alignment of the children | One of: `start, end, center` | `start` |
54 |
55 | \*\* By default, `Spacing` is one of [spacing-constants](https://github.com/Bedrock-Layouts/Bedrock/tree/main/packages/spacing-constants) values, but this can be overwritten using the `ThemeProvider` from `@bedrock-layout/spacing-constants`
56 |
--------------------------------------------------------------------------------
/packages/reel/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/reel",
3 | "version": "2.2.4",
4 | "description": "bedrock-layout reel",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "reel",
12 | "scroll-snap",
13 | "layout",
14 | "react"
15 | ],
16 | "author": "Bedrock Layout",
17 | "homepage": "https://bedrock-layout.dev/",
18 | "license": "MIT",
19 | "unpkg": "lib/index.umd.js",
20 | "main": "lib/index.umd.js",
21 | "umd:main": "lib/index.umd.js",
22 | "module": "lib/index.m.js",
23 | "source": "src/index.tsx",
24 | "types": "lib/index.d.ts",
25 | "exports": {
26 | ".": {
27 | "types": "./lib/index.d.ts",
28 | "import": "./lib/index.m.js",
29 | "require": "./lib/index.umd.js"
30 | }
31 | },
32 | "directories": {
33 | "lib": "lib",
34 | "test": "__tests__"
35 | },
36 | "files": [
37 | "lib"
38 | ],
39 | "dependencies": {
40 | "@bedrock-layout/spacing-constants": "^3.3.10",
41 | "@bedrock-layout/type-utils": "^0.1.14"
42 | },
43 | "peerDependencies": {
44 | "@bedrock-layout/css": "^2.1.0",
45 | "react": "^16.8 || ^17 || ^18"
46 | },
47 | "repository": {
48 | "type": "git",
49 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
50 | },
51 | "scripts": {
52 | "test": "echo \"Error: run tests from root\" && exit 1",
53 | "lint": "eslint --ignore-path .gitignore .",
54 | "clean:build": "rimraf lib",
55 | "build": "vite build && tsc --emitDeclarationOnly",
56 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
57 | "fix-format": "yarn prettier --write",
58 | "check-format": "yarn prettier --list-different",
59 | "check-types": "tsc --noEmit"
60 | },
61 | "bugs": {
62 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
63 | },
64 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
65 | "nx": {}
66 | }
67 |
--------------------------------------------------------------------------------
/packages/split/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/split",
3 | "version": "3.2.4",
4 | "description": "bedrock-layout split",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "split",
12 | "layout",
13 | "react"
14 | ],
15 | "author": "Jarvis1010 ",
16 | "homepage": "https://bedrock-layout.dev/",
17 | "license": "MIT",
18 | "unpkg": "lib/index.umd.js",
19 | "main": "lib/index.umd.js",
20 | "umd:main": "lib/index.umd.js",
21 | "module": "lib/index.m.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "dependencies": {
39 | "@bedrock-layout/spacing-constants": "^3.3.10",
40 | "@bedrock-layout/type-utils": "^0.1.14"
41 | },
42 | "peerDependencies": {
43 | "@bedrock-layout/css": "^2.1.0",
44 | "react": "^16.8 || ^17 || ^18"
45 | },
46 | "repository": {
47 | "type": "git",
48 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
49 | },
50 | "scripts": {
51 | "test": "echo \"Error: run tests from root\" && exit 1",
52 | "lint": "eslint --ignore-path .gitignore .",
53 | "clean:build": "rimraf lib",
54 | "build": "vite build && tsc --emitDeclarationOnly",
55 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
56 | "fix-format": "yarn prettier --write",
57 | "check-format": "yarn prettier --list-different",
58 | "check-types": "tsc --noEmit"
59 | },
60 | "bugs": {
61 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
62 | },
63 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
64 | "nx": {}
65 | }
66 |
--------------------------------------------------------------------------------
/packages/center/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/center",
3 | "version": "3.2.15",
4 | "description": "bedrock-layout center",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "center",
12 | "layout",
13 | "react"
14 | ],
15 | "author": "Jarvis1010 ",
16 | "homepage": "https://bedrock-layout.dev/",
17 | "license": "MIT",
18 | "unpkg": "lib/index.umd.js",
19 | "main": "lib/index.umd.js",
20 | "umd:main": "lib/index.umd.js",
21 | "module": "lib/index.m.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "dependencies": {
39 | "@bedrock-layout/spacing-constants": "^3.3.10",
40 | "@bedrock-layout/type-utils": "^0.1.14"
41 | },
42 | "peerDependencies": {
43 | "@bedrock-layout/css": "^2.1.0",
44 | "react": "^16.8 || ^17 || ^18"
45 | },
46 | "repository": {
47 | "type": "git",
48 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
49 | },
50 | "scripts": {
51 | "test": "echo \"Error: run tests from root\" && exit 1",
52 | "lint": "eslint --ignore-path .gitignore .",
53 | "clean:build": "rimraf lib",
54 | "build": "vite build && tsc --emitDeclarationOnly",
55 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
56 | "fix-format": "yarn prettier --write",
57 | "check-format": "yarn prettier --list-different",
58 | "check-types": "tsc --noEmit"
59 | },
60 | "bugs": {
61 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
62 | },
63 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
64 | "nx": {}
65 | }
66 |
--------------------------------------------------------------------------------
/packages/columns/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/columns",
3 | "version": "3.3.4",
4 | "description": "bedrock-layout columns",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "columns",
12 | "layout",
13 | "react"
14 | ],
15 | "author": "Jarvis1010 ",
16 | "homepage": "https://bedrock-layout.dev/",
17 | "license": "MIT",
18 | "unpkg": "lib/index.umd.js",
19 | "main": "lib/index.umd.js",
20 | "umd:main": "lib/index.umd.js",
21 | "module": "lib/index.m.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "dependencies": {
39 | "@bedrock-layout/spacing-constants": "^3.3.10",
40 | "@bedrock-layout/type-utils": "^0.1.14"
41 | },
42 | "peerDependencies": {
43 | "@bedrock-layout/css": "^2.1.0",
44 | "react": "^16.8 || ^17 || ^18"
45 | },
46 | "repository": {
47 | "type": "git",
48 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
49 | },
50 | "scripts": {
51 | "test": "echo \"Error: run tests from root\" && exit 1",
52 | "lint": "eslint --ignore-path .gitignore .",
53 | "clean:build": "rimraf lib",
54 | "build": "vite build && tsc --emitDeclarationOnly",
55 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
56 | "fix-format": "yarn prettier --write",
57 | "check-format": "yarn prettier --list-different",
58 | "check-types": "tsc --noEmit"
59 | },
60 | "bugs": {
61 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
62 | },
63 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
64 | "nx": {}
65 | }
66 |
--------------------------------------------------------------------------------
/stories/use-forwarded-ref/useForwardedRef.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from "@storybook/addon-docs";
2 |
3 |
4 |
5 | # useForwardedRef
6 |
7 | ## Use case
8 |
9 | Used to provide a safe ref to use when working with a forwardRef. The ref Object provided from `useForwardedRef` is stateful or in otherwords,
10 | will trigger a rerender when the `current` property changes.
11 |
12 | ## How to install
13 |
14 | ```bash
15 | npm install @bedrock-layout/use-forwarded-ref
16 | ```
17 |
18 | ## Basic usage
19 |
20 | ```javascript
21 | import { useForwardedRef } from '@bedrock-layout/use-forwarded-ref';
22 |
23 | const ForwardedRefDiv = React.forwardRef((props,ref)=>{
24 | const innerRef = useForwardedRef(ref)
25 | // do something with innerRef
26 | return
With 2 values
9 |["size2", "size7"]10 |
With 3 values
17 |["size3", "size1", "size7"]18 |
With 4 values
28 |["size3", "size1", "size1", "size7"]29 |
27 | })
28 | ```
29 |
30 | Then in your app you would use it like this:
31 |
32 | ```javascript
33 | const App = () => {
34 | const ref = React.useRef(null);
35 | console.log(ref.current);
36 | return {...content} ;
37 | };
38 | ```
39 |
40 | ## Config
41 |
42 | `useForwardedRef` accepts a single config object as a second argument. The config object can have the following properties: `isStateful`. `isStateful` is a boolean that determines if the ref is stateful or not.
43 |
44 | If `isStateful` is true, the ref will trigger a rerender when the `current` property changes. If `isStateful` is false, the ref will not trigger a rerender when the `current` property changes.
45 |
46 | The default value is true.
47 |
48 | For example:
49 |
50 | ```javascript
51 | import { useForwardedRef } from '@bedrock-layout/use-forwarded-ref';
52 |
53 | const ForwardedRefDiv = React.forwardRef((props,ref)=>{
54 | const innerRef = useForwardedRef(ref, {isStateful: false})
55 | // innerRef will not trigger a rerender when the `current` property changes
56 | return
57 | })
58 | ```
59 |
--------------------------------------------------------------------------------
/packages/padbox/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bedrock-layout/padbox",
3 | "version": "3.2.14",
4 | "description": "bedrock-layout padbox layout primitive",
5 | "sideEffects": false,
6 | "private": false,
7 | "publishConfig": {
8 | "access": "public"
9 | },
10 | "keywords": [
11 | "padbox",
12 | "layout",
13 | "react"
14 | ],
15 | "author": "Jarvis1010 ",
16 | "homepage": "https://bedrock-layout.dev/",
17 | "license": "MIT",
18 | "unpkg": "lib/index.umd.js",
19 | "main": "lib/index.umd.js",
20 | "umd:main": "lib/index.umd.js",
21 | "module": "lib/index.m.js",
22 | "source": "src/index.tsx",
23 | "types": "lib/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./lib/index.d.ts",
27 | "import": "./lib/index.m.js",
28 | "require": "./lib/index.umd.js"
29 | }
30 | },
31 | "directories": {
32 | "lib": "lib",
33 | "test": "__tests__"
34 | },
35 | "files": [
36 | "lib"
37 | ],
38 | "dependencies": {
39 | "@bedrock-layout/spacing-constants": "^3.3.10",
40 | "@bedrock-layout/type-utils": "^0.1.14"
41 | },
42 | "peerDependencies": {
43 | "@bedrock-layout/css": "^2.1.0",
44 | "react": "^16.8 || ^17 || ^18"
45 | },
46 | "repository": {
47 | "type": "git",
48 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
49 | },
50 | "scripts": {
51 | "test": "echo \"Error: run tests from root\" && exit 1",
52 | "lint": "eslint --ignore-path .gitignore .",
53 | "clean:build": "rimraf lib",
54 | "build": "vite build && tsc --emitDeclarationOnly",
55 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
56 | "fix-format": "yarn prettier --write",
57 | "check-format": "yarn prettier --list-different",
58 | "check-types": "tsc --noEmit"
59 | },
60 | "bugs": {
61 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
62 | },
63 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
64 | "nx": {}
65 | }
66 |
--------------------------------------------------------------------------------
/packages/solid/src/reel.tsx:
--------------------------------------------------------------------------------
1 | import { JSX, mergeProps } from "solid-js";
2 |
3 | import { SpacingOptions, getSpacingValue } from "./spacing-constants";
4 | import { useTheme } from "./theme-provider";
5 | import createDynamic, {
6 | DynamicProps,
7 | HeadlessPropsWithRef,
8 | ValidConstructor,
9 | createPropsFromAccessors,
10 | omitProps,
11 | } from "./typeUtils";
12 |
13 | export interface ReelBaseProps {
14 | snapType?: "none" | "proximity" | "mandatory";
15 | /**
16 | * @deprecated Use `gap` instead
17 | */
18 | gutter?: SpacingOptions;
19 | gap?: SpacingOptions;
20 | }
21 |
22 | export type ReelProps =
23 | HeadlessPropsWithRef;
24 |
25 | export function Reel(
26 | props: Readonly>,
27 | ): JSX.Element {
28 | const theme = useTheme();
29 | const propsStyle = () =>
30 | typeof props.style === "string"
31 | ? props.style
32 | : Object.entries(props.style ?? ({} as JSX.CSSProperties)).reduce(
33 | (str, [key, value]) => str + `${key}:${value};`,
34 | "",
35 | );
36 |
37 | const gutter = () =>
38 | `--gutter: ${
39 | getSpacingValue(theme, props.gap ?? props.gutter ?? "size00") ?? "0px"
40 | }`;
41 |
42 | const snapType = () => {
43 | switch (props.snapType) {
44 | case "none": {
45 | return "snapType:none";
46 | }
47 | case "proximity": {
48 | return "snapType:proximity";
49 | }
50 | case "mandatory": {
51 | return "snapType:mandatory";
52 | }
53 | default: {
54 | return "snapType:none";
55 | }
56 | }
57 | };
58 |
59 | const style = () => [propsStyle(), gutter()].join("; ");
60 |
61 | return createDynamic(
62 | () => props.as ?? ("div" as T),
63 | mergeProps(
64 | omitProps(props, ["as", "gutter"]),
65 | createPropsFromAccessors({ style, "data-br-reel": snapType }),
66 | ) as DynamicProps,
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/packages/appboundary/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { Center } from "@bedrock-layout/center";
2 | import {
3 | CSSLength,
4 | SizesOptions,
5 | getSizeValue,
6 | sizes,
7 | useTheme,
8 | } from "@bedrock-layout/spacing-constants";
9 | import { forwardRefWithAs } from "@bedrock-layout/type-utils";
10 | import React from "react";
11 |
12 | /**
13 | * The `boundarySize` prop can can be a CSSLength, a number, or a key of the theme's sizes options.
14 | */
15 | export type BoundarySize = number | CSSLength | SizesOptions;
16 |
17 | /**
18 | * Props for the AppBoundary component.
19 | */
20 | export type AppBoundaryProps = {
21 | /**
22 | * Sets the size of the app boundary.
23 | * The `boundarySize` prop can accept any positive integer, `CSSLength`, `SizeOption`.
24 | */
25 | boundarySize?: BoundarySize;
26 | };
27 |
28 | /**
29 | * The `AppBoundary` component is designed to wrap your entire app.
30 | * Your app will be clamped at the `boundarySize` and stay centered on the screen.
31 | * By default, it will clamp the width at the `sizeXxl` option,
32 | * but can also be set to other the valid size options using the `boundarySize` prop.
33 | *
34 | * @deprecated this component is deprecated and will be removed in the next major version
35 | */
36 | export const AppBoundary = forwardRefWithAs<"div", AppBoundaryProps>(
37 | function AppBoundary(
38 | { as: Component = "div", boundarySize, children, style, ...props },
39 | ref,
40 | ) {
41 | const theme = useTheme();
42 | const maybeSize = getSizeValue(theme, boundarySize);
43 | const safeStyle = style ?? {};
44 |
45 | return (
46 |
57 | {children}
58 |
59 | );
60 | },
61 | );
62 |
--------------------------------------------------------------------------------
/packages/center/src/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CSSLength,
3 | SizesOptions,
4 | getSizeValue,
5 | useTheme,
6 | } from "@bedrock-layout/spacing-constants";
7 | import { forwardRefWithAs } from "@bedrock-layout/type-utils";
8 | import React, { CSSProperties } from "react";
9 |
10 | /**
11 | * The `maxWidth` prop can be a CSSLength, a number, or a key of the theme's sizes options.
12 | */
13 | export type MaxWidth = number | CSSLength | SizesOptions;
14 |
15 | /**
16 | * Props for the Center component.
17 | */
18 | export type CenterProps = {
19 | /**
20 | * Sets the max-inline size of the component.
21 | * The `maxWidth` prop can be a CSSLength, a number, or a key of the theme's sizes options.
22 | */
23 | maxWidth?: MaxWidth;
24 | /**
25 | * Sets the text alignment of the component to center.
26 | */
27 | centerText?: boolean;
28 | /**
29 | * Sets the alignment of the component's children to be centered.
30 | * @deprecated Use with the stack component set to align="center" instead.
31 | */
32 | centerChildren?: boolean;
33 | };
34 |
35 | /**
36 | * The `Center` component is designed to center and clamp its width at a predefined value.
37 | * You can also center the children and text alignment as well.
38 | */
39 | export const Center = forwardRefWithAs<"div", CenterProps>(function Center(
40 | {
41 | as: Component = "div",
42 | centerChildren,
43 | centerText,
44 | maxWidth,
45 | style = {},
46 | ...props
47 | },
48 | ref,
49 | ) {
50 | const theme = useTheme();
51 | const centerProps = [
52 | centerText && "center-text",
53 | centerChildren && "center-children",
54 | ]
55 | .filter(Boolean)
56 | .join(" ");
57 |
58 | return (
59 | ",
17 | "homepage": "https://bedrock-layout.dev/",
18 | "license": "MIT",
19 | "unpkg": "lib/index.umd.js",
20 | "main": "lib/index.umd.js",
21 | "umd:main": "lib/index.umd.js",
22 | "module": "lib/index.m.js",
23 | "source": "src/index.tsx",
24 | "types": "lib/index.d.ts",
25 | "exports": {
26 | ".": {
27 | "types": "./lib/index.d.ts",
28 | "import": "./lib/index.m.js",
29 | "require": "./lib/index.umd.js"
30 | }
31 | },
32 | "directories": {
33 | "lib": "lib",
34 | "test": "__tests__"
35 | },
36 | "files": [
37 | "lib"
38 | ],
39 | "dependencies": {
40 | "@bedrock-layout/spacing-constants": "^3.3.10",
41 | "@bedrock-layout/type-utils": "^0.1.14"
42 | },
43 | "peerDependencies": {
44 | "@bedrock-layout/css": "^2.1.0",
45 | "react": "^16.8 || ^17 || ^18"
46 | },
47 | "repository": {
48 | "type": "git",
49 | "url": "git+https://github.com/Bedrock-Layouts/Bedrock.git"
50 | },
51 | "scripts": {
52 | "test": "echo \"Error: run tests from root\" && exit 1",
53 | "lint": "eslint --ignore-path .gitignore .",
54 | "clean:build": "rimraf lib",
55 | "build": "vite build && tsc --emitDeclarationOnly",
56 | "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|ts|tsx|json)\"",
57 | "fix-format": "yarn prettier --write",
58 | "check-format": "yarn prettier --list-different",
59 | "check-types": "tsc --noEmit"
60 | },
61 | "bugs": {
62 | "url": "https://github.com/Bedrock-Layouts/Bedrock/issues"
63 | },
64 | "gitHead": "a3f85a5aebbd9681317b1c00c88765b2537f9b10",
65 | "nx": {}
66 | }
67 |
--------------------------------------------------------------------------------