-
11 | // {docs.map((doc) => (
12 | //
- 13 | // {doc.name} 14 | // 15 | // ))} 16 | //
...
23 | ```
24 |
--------------------------------------------------------------------------------
/packages/benefit/config/utilities/width.ts:
--------------------------------------------------------------------------------
1 | import createUtilitiesFromMap from "../createUtilitiesFromMap"
2 |
3 | export default function generate(theme: any) {
4 | const { width = {}, maxWidth = {}, minWidth = {} } = theme
5 | return {
6 | ...createUtilitiesFromMap(
7 | width,
8 | (value: string) => ({
9 | width: value,
10 | }),
11 | "w"
12 | ),
13 | ...createUtilitiesFromMap(
14 | maxWidth,
15 | (value: string) => ({
16 | "max-width": value,
17 | }),
18 | "max-w"
19 | ),
20 | ...createUtilitiesFromMap(
21 | minWidth,
22 | (value: string) => ({
23 | "min-width": value,
24 | }),
25 | "min-w"
26 | ),
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/theme/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
20 |
24 | ```
25 |
26 | > The above `container` has a utility of `mx-auto` added so it is centered horizontally within the parent.
27 |
--------------------------------------------------------------------------------
/packages/benefit-react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["."],
3 | "exclude": ["node_modules", "dist", "build"],
4 | "compilerOptions": {
5 | "target": "es5",
6 | "module": "esnext",
7 | "lib": ["dom", "esnext"],
8 | "importHelpers": true,
9 | "sourceMap": true,
10 | "rootDir": "./",
11 | "strict": true,
12 | "noImplicitAny": true,
13 | "strictNullChecks": true,
14 | "strictFunctionTypes": true,
15 | "strictPropertyInitialization": true,
16 | "noImplicitThis": true,
17 | "alwaysStrict": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true,
20 | "noImplicitReturns": true,
21 | "noFallthroughCasesInSwitch": true,
22 | "moduleResolution": "node",
23 | "baseUrl": "./",
24 | "paths": {
25 | "*": ["node_modules/*"]
26 | },
27 | "jsx": "react",
28 | "esModuleInterop": true
29 | },
30 | "references": [{ "path": "../benefit" }]
31 | }
32 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/svg/flex.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/components/header.js:
--------------------------------------------------------------------------------
1 | import { Link } from "gatsby"
2 | import PropTypes from "prop-types"
3 | import React from "react"
4 |
5 | const Header = ({ siteTitle }) => (
6 | 21 | Business at the speed of light. 22 |
23 |
19 |
31 | 20 | 27 | {siteTitle} 28 | 29 |
30 |
10 |
31 | )
32 | }
33 |
34 | render(
16 |
20 | 17 | Dolor Sit Amet 18 |
19 |
21 |
30 | 27 | Lorem Ipsum 28 |
29 |
8 | Welcome to Next.js! Click{" "}
9 |
13 | here
14 | {" "}
15 | to read more
16 |
34 | )
35 | }
36 |
37 | export default Home
38 |
--------------------------------------------------------------------------------
/packages/benefit-react/index.ts:
--------------------------------------------------------------------------------
1 | import ConfigContext, { ConfigConsumer, ConfigProvider } from "./ConfigContext"
2 | import ServerStyleManager from "./ServerStyleManager"
3 | import Box from "./Box"
4 | import jsx from "./jsx"
5 | import Preflight from "./Preflight"
6 |
7 | import {
8 | createBenefit,
9 | createUtilitiesFromMap,
10 | createVariant,
11 | createVariantsFromMap,
12 | flattenColorConfig,
13 | css,
14 | injectGlobal,
15 | injectPreflight,
16 | registry,
17 | keyframes,
18 | parseDeclarations,
19 | theme,
20 | } from "benefit"
21 |
22 | export {
23 | ConfigContext,
24 | ConfigConsumer,
25 | ConfigProvider,
26 | ServerStyleManager,
27 | Box,
28 | jsx,
29 | registry,
30 | createBenefit,
31 | createUtilitiesFromMap,
32 | createVariant,
33 | createVariantsFromMap,
34 | css,
35 | keyframes,
36 | flattenColorConfig,
37 | parseDeclarations,
38 | injectGlobal,
39 | injectPreflight,
40 | Preflight,
41 | theme,
42 | }
43 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/introduction.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Introduction
3 | route: /
4 | nextRoute: /getting-started
5 | nextLabel: Getting Started
6 | showLogo: true
7 | ---
8 |
9 | import { Box, ConfigProvider } from "benefit-react"
10 | import Logo from "./components/Logo"
11 | import Alert from "./components/Alert"
12 | import { Playground, Link } from "docz"
13 | import Output from "./components/Output"
14 |
15 | ## Style web applications using generated utility classes
16 |
17 | `benefit` is a _5Kb_, utility CSS library that is compatible with TailwindCSS.
18 |
19 | - Small runtime
20 | - No build step
21 | - Element [normalization](/customization/normalize)
22 | - Style isolation
23 | - Fully [Customizable](/customization/overview)
24 | - Works with [TailwindCSS](https://tailwindcss.com) class names out of box
25 |
26 | And... it only inlines the CSS for the utilities that you actually use:
27 |
28 |
29 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/components/InfoBox.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx } from "benefit-react"
3 |
4 | export default function LayoutBox({
5 | color = "gray",
6 | caption,
7 | children,
8 | pattern,
9 | isDefault,
10 | className,
11 | }) {
12 | return (
13 |
22 | lorem ipsum
23 |
24 |
30 | Hello
31 |
32 | World
33 |
16 | {isDefault && (
17 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/docs/utilities/border/border-style.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Border Style
3 | property: border-style
4 | parent: Border
5 | route: /border/border-style/
6 | previousRoute: /border/border-radius/
7 | previousLabel: Border Radius
8 | nextRoute: /border/border-width/
9 | nextLabel: Border Width
10 | ---
11 |
12 |
20 | Default
21 |
22 | )}
23 | {caption && (
24 | 25 | {caption} 26 |
27 | )} 28 | {pattern && ( 29 | {pattern} 30 | )} 31 |{children}
32 |
43 |
44 |
45 |
46 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/packages/benefit/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "benefit",
3 | "version": "2.2.1",
4 | "main": "dist/index.js",
5 | "module": "dist/benefit.esm.js",
6 | "types": "dist/index.d.ts",
7 | "repository": "https://github.com/cdonohue/benefit.git",
8 | "contributors": [
9 | "Chad Donohue ...
37 |
31 |
36 | )
37 | }
38 | ```
39 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/docs/customization/theme.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Theme
3 | route: /customization/theme/
4 | parent: Customization
5 | previousRoute: /customization/overview/
6 | previousLabel: Customization
7 | nextRoute: /customization/utilities/
8 | nextLabel: Utilities
9 | ---
10 |
11 | The `theme` key is a way of holding all of your design system rules to iterate over with any `utilities` defined later. For example, one of the keys in the default `theme` is `fontWeight`:
12 |
13 | ```js
14 | import { ConfigProvider, jsx } from "benefit"
15 |
16 | return (
17 | 32 | Williamsburg stumptown iPhone, gastropub vegan banh mi 33 | microdosingpost-ironic pok pok +1 bespoke dreamcatcher bushwick brunch. 34 |
35 |...
37 |
27 |
31 | ```
32 |
33 | > The above `container` has a utility of `mx-auto` added so it is centered horizontally within the parent.
34 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/components/UtilityBox.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { useMenus, Link } from "docz"
3 | import { css } from "emotion"
4 | import { jsx } from "benefit-react"
5 |
6 | import Icon from "./Icons"
7 | import Grid from "./Grid"
8 |
9 | const styledLink = css`
10 | transition: 0.1s ease-in-out;
11 | `
12 |
13 | export default function UtilityBox({ category, icon }) {
14 | const menuItems = useMenus()
15 |
16 | return (
17 | 28 | Business at the speed of light. 29 |
30 |
18 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/components/UtilityBox.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { useMenus, Link } from "docz"
3 | import { css } from "emotion"
4 | import { jsx } from "benefit-react"
5 |
6 | import Icon from "./Icons"
7 | import Grid from "./Grid"
8 |
9 | const styledLink = css`
10 | transition: 0.1s ease-in-out;
11 | `
12 |
13 | export default function UtilityBox({ category, icon }) {
14 | const menuItems = useMenus()
15 |
16 | return (
17 |
19 |
21 | {category}
20 |
22 | {menuItems
23 | .filter((item) => item.parent === category)
24 | .map((item) => (
25 |
30 | {item.name}
31 |
32 | ))}
33 |
34 |
18 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/utilities/effects/opacity.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Opacity
3 | property: opacity
4 | parent: Effects
5 | route: /effects/opacity
6 | previousRoute: /effects/box-shadow
7 | previousLabel: Box Shadow
8 | nextRoute: /interactivity/appearance
9 | nextLabel: Appearance
10 | ---
11 |
12 | import { Box, ConfigConsumer } from "benefit-react"
13 | import Grid from "../../components/Grid"
14 | import InfoBox from "../../components/InfoBox"
15 | import ConfigPropertyList from "../../components/ConfigPropertyList"
16 | import UtilityInfo from "../../components/UtilityInfo"
17 |
18 |
19 |
21 | {category}
20 |
22 | {menuItems
23 | .filter((item) => item.parent === category)
24 | .map((item) => (
25 |
30 | {item.name}
31 |
32 | ))}
33 |
34 |
7 | {styles.map((s: any) => (
8 |
19 | ))}
20 |
21 | )
22 | }
23 |
24 | export default function ServerStyleManager() {
25 | const benefitRegistry = registry.getInstance()
26 | const {
27 | css,
28 | global,
29 | keyframes,
30 | normalize,
31 | preflight,
32 | utilities,
33 | } = benefitRegistry.getRegistry()
34 |
35 | return (
36 |
37 |
46 | {createContainer("preflight", preflight)}
47 | {createContainer("global", global)}
48 | {createContainer("keyframes", keyframes)}
49 | {createContainer("normalize", normalize)}
50 | {createContainer("utilities", utilities)}
51 | {createContainer("css", css)}
52 |
53 | )
54 | }
55 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/docs/customization/apply.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Apply
3 | route: /customization/apply/
4 | parent: Customization
5 | previousRoute: /customization/variants/
6 | previousLabel: Variants
7 | nextRoute: /layout/container/
8 | nextLabel: Container
9 | ---
10 |
11 | Once you start noticing patterns of repeated classes in your component/application, you can use the `apply` key to map a more appropriate name to an array of utility classes.
12 |
13 | ```js
14 | import { ConfigProvider, jsx } from "benefit-react"
15 |
16 | return (
17 |
24 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/docs/introduction.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Introduction
3 | route: /
4 | nextRoute: /installation/agnostic/
5 | nextLabel: Installation
6 | showLogo: true
7 | ---
8 |
9 | > `benefit` is a utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles. These styles are generated for you as you use them, so you don't have to worry about including stylesheets or eliminating unused styles.
10 |
11 | ### Let's look at a quick example:
12 |
13 | Here, we are applying 5 utility classes to a `
33 | {name}
34 | {!isSingleColor && "-{level}"}
35 |
36 | {!isSingleColor && (
37 |
38 | {Object.keys(colors).map(shade => {
39 | const shadeContrast = polychrome(colors[shade])
40 | .contrast()
41 | .hex()
42 | return (
43 |
47 | )
48 | })}
49 |
50 | )}
51 | `. Click any class to remove it and try adding some new ones (like `bg-pink-400` or `italic`).
14 |
15 | ---
16 |
17 |
` with some alert content. The goal is for us to make this look like an error that is displayed to the user.
26 |
27 | - First, we'll add `bg-red-800` to style the background
28 | - Next, add `text-white`
29 | - Add some padding with `p-4`
30 | - Round the corners using `rounded`
31 | - Raise the error off of the page a bit by adding `shadow-xl`
32 |
33 |
36 | {
26 | return {
27 | ...config,
28 | apply: {
29 | "hero-banner": [
30 | "p-8",
31 | "text-2xl",
32 | "text-center",
33 | "uppercase",
34 | "bg-blue-500",
35 | "text-white",
36 | "tracking-tight",
37 | ],
38 | },
39 | }
40 | }}
41 | >
42 | Business at the speed of light
43 |
44 | )
45 | ```
46 |
47 | {
49 | return {
50 | ...config,
51 | apply: {
52 | "hero-banner": [
53 | "p-8",
54 | "text-2xl",
55 | "text-center",
56 | "uppercase",
57 | "bg-blue-500",
58 | "text-white",
59 | "tracking-tight",
60 | ],
61 | },
62 | }
63 | }}
64 | >
65 |
66 | Business at the speed of light
67 |
68 |
69 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/utilities/background/background-size.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Background Size
3 | property: background-size
4 | parent: Background
5 | route: /background/background-size
6 | previousRoute: /background/background-repeat
7 | previousLabel: Background Repeat
8 | nextRoute: /border/border-color
9 | nextLabel: Border Color
10 | ---
11 |
12 | import { Playground } from "docz"
13 | import InfoBox from "../../components/InfoBox"
14 | import Grid from "../../components/Grid"
15 | import { Box } from "benefit-react"
16 |
17 | import UtilityInfo from "../../components/UtilityInfo"
18 |
19 |
24 |
25 |
33 |
34 |
42 |
43 |
51 |
52 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/components/Color.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import polychrome from "polychrome"
3 | import { jsx } from "benefit-react"
4 |
5 | export default function Color({ className, name, colors }) {
6 | if (name === "default") return
7 |
8 | const isSingleColor = typeof colors === "string"
9 | let baseColor = isSingleColor ? colors : colors[400]
10 | let isTransparent = false
11 |
12 | if (isSingleColor && baseColor === "transparent") {
13 | baseColor = "#fff"
14 | isTransparent = true
15 | }
16 |
17 | const baseContrast = polychrome(baseColor)
18 | .contrast()
19 | .hex()
20 | return (
21 |
22 |
23 |
24 |
25 | Will not shrink
26 |
27 |
28 | This will shrink, even if it means the content will end up wrapping.
29 |
30 |
31 | Will not shrink
32 |
33 |
34 |
35 |
36 |
37 |
38 | Will shrink
39 |
40 |
41 | Will not shrink below its initial size
42 |
43 |
44 | Will shrink
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/docs/utilities/interactivity/outline.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Outline
3 | property: outline
4 | parent: Interactivity
5 | route: /interactivity/outline/
6 | previousRoute: /interactivity/cursor/
7 | previousLabel: Cursor
8 | nextRoute: /interactivity/pointer-events/
9 | nextLabel: Pointer Events
10 | ---
11 |
12 |
19 |
20 | Native
21 |
22 |
24 |
25 | Using{" "}
26 | outline-none
27 |
28 |
29 |
31 |
32 |
33 |
34 | Using{" "}
35 | outline-none {" "}
36 | and{" "}
37 |
38 | focus:shadow-outline
39 |
40 |
41 |
42 |
47 |
48 |
49 |
50 | > With great power comes great responsibility. As this takes visual identifiers away from the user, just remember to give some visual indicator and replace the outline that was removed (Similar to the example above).
51 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/utilities/interactivity/pointer-events.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Pointer Events
3 | property: pointer-events
4 | parent: Interactivity
5 | route: /interactivity/pointer-events
6 | previousRoute: /interactivity/outline
7 | previousLabel: Outline
8 | nextRoute: /interactivity/resize
9 | nextLabel: Resize
10 | ---
11 |
12 | import { Box } from "benefit-react"
13 | import UtilityInfo from "../../components/UtilityInfo"
14 | import InfoBox from "../../components/InfoBox"
15 | import Grid from "../../components/Grid"
16 |
17 |
24 |
25 | alert("Button clicked")}
29 | className="bg-gray-600 text-white w-full p-4 rounded shadow-lg font-semibold uppercase"
30 | >
31 | A Button
32 |
33 |
34 |
38 | alert("Button clicked")}
42 | className="pointer-events-none bg-gray-600 text-white w-full p-4 rounded shadow-lg font-semibold uppercase"
43 | >
44 | A Button
45 |
46 |
47 |
48 |
49 | > In addition to indicating that the element is not the target of pointer events, the value `none` instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.
50 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/docs/utilities/border/border-width.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Border Width
3 | property: border-width
4 | parent: Border
5 | route: /border/border-width/
6 | previousRoute: /border/border-style/
7 | previousLabel: Border Style
8 | nextRoute: /flexbox/align-content/
9 | nextLabel: Align Content
10 | ---
11 |
12 |
21 |
22 |
24 |
25 |
27 |
28 |
30 |
31 |
33 |
34 |
36 |
37 |
38 | ---
39 |
40 |
45 |
46 |
48 |
49 |
51 |
52 |
54 |
55 |
57 |
58 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/docs/utilities/flexbox/flex-wrapping.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Flex Wrapping
3 | property: flex-wrap
4 | parent: Flexbox
5 | route: /flexbox/flex-wrapping/
6 | previousRoute: /flexbox/flex-shrink/
7 | previousLabel: Flex Shrink
8 | nextRoute: /flexbox/justify-content/
9 | nextLabel: Justify Content
10 | ---
11 |
12 |
17 |
18 |
19 | {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(item => (
20 |
21 |
22 | {item}
23 |
24 |
25 | ))}
26 |
27 |
28 |
29 |
30 | {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(item => (
31 |
32 |
33 | {item}
34 |
35 |
36 | ))}
37 |
38 |
39 |
40 |
41 | {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(item => (
42 |
43 |
44 | {item}
45 |
46 |
47 | ))}
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/packages/benefit/util/insertStyle.ts:
--------------------------------------------------------------------------------
1 | import initializeContainers from "./initializeContainers"
2 | const isBrowser = typeof window !== "undefined"
3 |
4 | function createStyleTag(
5 | id: string,
6 | rules: string,
7 | options: { label?: string; index?: string } = {}
8 | ) {
9 | const { label = "", index = "" } = options
10 |
11 | const styleTag = document.createElement("style")
12 |
13 | styleTag.setAttribute("id", id)
14 | styleTag.setAttribute(`data-benefit${label ? `-${label}` : ""}`, "")
15 | if (index) {
16 | styleTag.setAttribute("data-benefit-index", index)
17 | }
18 |
19 | styleTag.innerHTML = rules
20 |
21 | return styleTag
22 | }
23 |
24 | export default function insertStyle(type: any, entry: any, index: any) {
25 | if (isBrowser) {
26 | initializeContainers()
27 | if (type === "utilities") {
28 | const existingIndex = document.querySelector(
29 | `[data-benefit-index='${entry.index}']`
30 | )
31 |
32 | if (existingIndex) {
33 | existingIndex.id = entry.id
34 | existingIndex.innerHTML = entry.rules
35 | } else {
36 | const styleTag = createStyleTag(entry.id, entry.rules, {
37 | label: "utility",
38 | index: entry.index,
39 | })
40 |
41 | const addedStyles = document.querySelectorAll("[data-benefit-utility]")
42 |
43 | const container = document.getElementById("benefit-utilities")
44 |
45 | if (container) {
46 | container.insertBefore(styleTag, addedStyles[index])
47 | }
48 | }
49 | } else {
50 | if (!document.getElementById(entry.id)) {
51 | const container = document.getElementById(`benefit-${type}`)
52 | if (container) {
53 | container.appendChild(createStyleTag(entry.id, entry.rules))
54 | }
55 | }
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/utilities/typography/text-alignment.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Text Alignment
3 | property: text-align
4 | parent: Typography
5 | route: /typography/text-alignment
6 | previousRoute: /typography/style-decoration
7 | previousLabel: Style and Decoration
8 | nextRoute: /typography/text-color
9 | nextLabel: Text Color
10 | ---
11 |
12 | import { Playground } from "docz"
13 | import { Box, ConfigConsumer } from "benefit-react"
14 | import InfoBox from "../../components/InfoBox"
15 | import Grid from "../../components/Grid"
16 | import ConfigPropertyList from "../../components/ConfigPropertyList"
17 | import UtilityInfo from "../../components/UtilityInfo"
18 |
19 |
24 |
25 |
26 | Hoodie waistcoat mlkshk keytar sustainable, everyday carry tofu squid
27 | aesthetic twee tumeric next level hell of heirloom.{" "}
28 |
29 |
30 |
31 |
32 | Hoodie waistcoat mlkshk keytar sustainable, everyday carry tofu squid
33 | aesthetic twee tumeric next level hell of heirloom.{" "}
34 |
35 |
36 |
37 |
38 | Hoodie waistcoat mlkshk keytar sustainable, everyday carry tofu squid
39 | aesthetic twee tumeric next level hell of heirloom.{" "}
40 |
41 |
42 |
43 |
44 | Hoodie waistcoat mlkshk keytar sustainable, everyday carry tofu squid
45 | aesthetic twee tumeric next level hell of heirloom.{" "}
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/utilities/effects/box-shadow.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Box Shadow
3 | property: box-shadow
4 | parent: Effects
5 | route: /effects/box-shadow
6 | previousRoute: /tables/table-layout
7 | previousLabel: Table Layout
8 | nextRoute: /effects/opacity
9 | nextLabel: Opacity
10 | ---
11 |
12 | import { Box, ConfigConsumer } from "benefit-react"
13 | import Grid from "../../components/Grid"
14 | import InfoBox from "../../components/InfoBox"
15 | import ConfigPropertyList from "../../components/ConfigPropertyList"
16 | import UtilityInfo from "../../components/UtilityInfo"
17 |
18 |
23 |
24 |
26 |
27 |
29 |
30 |
32 |
33 |
35 |
36 |
38 |
39 |
41 |
42 |
44 |
45 |
47 |
48 |
--------------------------------------------------------------------------------
/packages/benefit-docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "benefit-docs",
3 | "private": true,
4 | "description": "Benefit documentation",
5 | "version": "0.1.0",
6 | "author": "Chad Donohue ",
7 | "dependencies": {
8 | "@babel/core": "^7.5.5",
9 | "@babel/plugin-transform-react-jsx": "^7.3.0",
10 | "@babel/standalone": "^7.6.0",
11 | "@mdx-js/mdx": "^1.1.1",
12 | "@mdx-js/react": "^1.1.1",
13 | "benefit-react": "2.2.0",
14 | "buble": "^0.19.8",
15 | "gatsby": "^2.13.44",
16 | "gatsby-image": "^2.2.7",
17 | "gatsby-plugin-manifest": "^2.2.4",
18 | "gatsby-plugin-mdx": "^1.0.18",
19 | "gatsby-plugin-nprogress": "^2.1.2",
20 | "gatsby-plugin-offline": "^2.2.4",
21 | "gatsby-plugin-react-helmet": "^3.1.2",
22 | "gatsby-plugin-sharp": "^2.2.9",
23 | "gatsby-plugin-typescript": "2.1.2",
24 | "gatsby-source-filesystem": "^2.1.6",
25 | "gatsby-transformer-sharp": "^2.2.5",
26 | "polychrome": "4.1.2",
27 | "prism-react-renderer": "^0.1.7",
28 | "prop-types": "^15.7.2",
29 | "react": "^16.8.6",
30 | "react-dom": "^16.8.6",
31 | "react-element-to-jsx-string": "^14.0.3",
32 | "react-helmet": "^5.2.1",
33 | "react-live": "^2.1.2"
34 | },
35 | "devDependencies": {
36 | "prettier": "^1.18.2"
37 | },
38 | "keywords": [
39 | "gatsby"
40 | ],
41 | "license": "MIT",
42 | "scripts": {
43 | "build": "gatsby build",
44 | "develop": "gatsby develop",
45 | "format": "prettier --write src/**/*.{js,jsx}",
46 | "start": "npm run develop",
47 | "serve": "gatsby serve",
48 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
49 | },
50 | "repository": {
51 | "type": "git",
52 | "url": "https://github.com/gatsbyjs/gatsby-starter-default"
53 | },
54 | "bugs": {
55 | "url": "https://github.com/gatsbyjs/gatsby/issues"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/packages/benefit-docs/src/docs/installation/react.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: React
3 | route: /installation/react/
4 | parent: Installation
5 | previousRoute: /installation/agnostic/
6 | previousLabel: Installation
7 | nextRoute: /customization/overview/
8 | nextLabel: Customization
9 | ---
10 |
11 | ```bash
12 | npm i benefit-react
13 | ```
14 |
15 | > Requires `react` >= `16.3`
16 |
17 | You have two ways of integrating `benefit-react` into your project:
18 |
19 | ### JSX Pragma
20 |
21 | This option requires some additional configuration, but does not require you to wrap each component that you intend to use utility classes with.
22 |
23 | > Similar to a comment containing linter configuration, this configures the jsx babel plugin to use the `jsx` function instead of `React.createElement`.
24 | >
25 | > [JSX Pragma Documentation](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#pragma)
26 |
27 | Set the jsx pragma at the top of your source file and import the `jsx` function from `benefit-react`
28 |
29 | ```js
30 | /** @jsx jsx */
31 | import { jsx } from "benefit-react"
32 |
33 | export default function MyComponent() {
34 | return
48 | ...
49 |
50 | )
51 | }
52 | ```
53 |
54 | _The `jsx` function is really just passing all of your elements through the `Box` component and applying utility styles. It's up to you which one to use. The `jsx` pragma approach just saves you a bit of typing_
55 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/customization/overview.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Overview
3 | route: /customization/overview
4 | parent: Customization
5 | previousRoute: /getting-started
6 | previousLabel: Getting Started
7 | nextRoute: /customization/theme
8 | nextLabel: Theme
9 | ---
10 |
11 | `benefit` exposes the methods used to build its own default configuration. You have the option of keeping as much or as little as you want of it. Similar to how you would override a `webpack` config in other tools, just supply a function that will return your configuration.
12 |
13 | ```js
14 | const myConfig = (config) => {
15 | /* modify existing config and return */
16 | }
17 | ```
18 |
19 | Your configuration function can be passed into the `benefit` function...
20 |
21 | ```js
22 | import benefit from "benefit"
23 |
24 | const myConfig = (config) => {
25 | /* modify existing config and return */
26 | }
27 |
28 | const { styleWith } = benefit(myConfig)
29 |
30 | // styleWith is now capable of parsing/injecting any custom utilities that you have created
31 | ```
32 |
33 | ...or into a react `ConfigProvider`.
34 |
35 | ```js
36 | import { ConfigProvider } from "benefit/react"
37 |
38 | const myConfig = (config) => {
39 | /* modify existing config and return */
40 | }
41 | const App = () => (
42 |
43 | {/* Use any utility classes within here */}
44 |
45 | )
46 | ```
47 |
48 | The configuration function will be passed in the default configuration should you need to borrow any values to compose with.
49 |
50 | The `config` object has the following shape:
51 |
52 | ```js
53 | {
54 | // This prefix will prepend all utility class names
55 | prefix: "",
56 | theme: {},
57 | normalize: (theme) => ({}),
58 | utilities: [(theme) => ({}), (theme) => ({}), ...],
59 | variants: [(utilities, theme) => ({}), (utilities, theme) => ({}), ...],
60 | apply: {}
61 | }
62 | ```
63 |
--------------------------------------------------------------------------------
24 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/packages/benefit-docs-old/utilities/flexbox/shrink.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Flex Shrink
3 | property: flex-shrink
4 | parent: Flexbox
5 | route: /flexbox/flex-shrink
6 | previousRoute: /flexbox/flex-grow
7 | previousLabel: Flex Grow
8 | nextRoute: /flexbox/flex-wrapping
9 | nextLabel: Flex Wrapping
10 | ---
11 |
12 | import { Box } from "benefit-react"
13 | import InfoBox from "../../components/InfoBox"
14 | import Grid from "../../components/Grid"
15 | import UtilityInfo from "../../components/UtilityInfo"
16 |
17 |
33 | {name}
34 | {!isSingleColor && "-{level}"}
35 |
36 | {!isSingleColor && (
37 |
38 | {Object.keys(colors).map((shade) => {
39 | const shadeContrast = polychrome(colors[shade])
40 | .contrast()
41 | .hex()
42 | return (
43 |
52 | )}
53 |
47 | {shade}
48 |
49 | )
50 | })}
51 | ...
35 | }
36 | ```
37 |
38 | ### Box component
39 |
40 | As an alternative to the `jsx` approach, you can also import the `Box` component and use that as you would render any other component. The same example from above using a `Box` would look like the following:
41 |
42 | ```js
43 | import { Box } from "benefit-react"
44 |
45 | export default function MyComponent() {
46 | return (
47 |