├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── renovate.json └── workflows │ └── check.yml ├── .gitignore ├── .nvmrc ├── .prettierrc.js ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── babel.config.js ├── lerna.json ├── lint-staged.config.js ├── package.json ├── packages ├── docs │ ├── CHANGELOG.md │ ├── babel.config.js │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── public │ │ ├── img │ │ │ ├── favicon@192.png │ │ │ ├── icon@128.png │ │ │ ├── icon@192.png │ │ │ ├── icon@512.png │ │ │ ├── logo-og.png │ │ │ └── logo-readme.png │ │ └── manifest.json │ ├── src │ │ ├── components │ │ │ ├── code │ │ │ │ ├── code.tsx │ │ │ │ └── index.tsx │ │ │ ├── head.tsx │ │ │ ├── headings.tsx │ │ │ ├── layout.tsx │ │ │ └── toggle-color-mode.tsx │ │ ├── config.ts │ │ ├── lib │ │ │ └── plausible.tsx │ │ ├── pages │ │ │ ├── _app.tsx │ │ │ ├── _document.tsx │ │ │ └── index.md │ │ └── theme.ts │ └── tsconfig.json └── raam │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ ├── flex.tsx │ ├── index.ts │ ├── inline.tsx │ ├── private │ │ ├── box.ts │ │ ├── flexbox.ts │ │ ├── flexgap.ts │ │ └── types.ts │ ├── stack.tsx │ └── wrap.tsx │ ├── test │ ├── __snapshots__ │ │ └── index.tsx.snap │ └── index.tsx │ └── tsconfig.json └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: "@typescript-eslint/parser", 3 | plugins: ["jsx-a11y"], 4 | extends: [ 5 | "plugin:react/recommended", 6 | "plugin:@typescript-eslint/recommended", 7 | "plugin:jsx-a11y/strict", 8 | "plugin:prettier/recommended", 9 | "prettier/react", 10 | "prettier/@typescript-eslint", 11 | ], 12 | parserOptions: { 13 | ecmaVersion: 2018, 14 | sourceType: "module", 15 | ecmaFeatures: { 16 | jsx: true, 17 | }, 18 | }, 19 | rules: { 20 | "@typescript-eslint/explicit-function-return-type": "off", 21 | "@typescript-eslint/prefer-interface": "off", 22 | "@typescript-eslint/ban-ts-ignore": "off", 23 | "jsx-a11y/label-has-for": "off", 24 | "react/prop-types": "off", 25 | "react/display-name": "off", 26 | }, 27 | settings: { 28 | react: { 29 | version: "detect", 30 | }, 31 | }, 32 | overrides: [ 33 | { 34 | files: ["*.js"], 35 | rules: { 36 | "@typescript-eslint/no-var-requires": "off", 37 | }, 38 | }, 39 | { 40 | files: ["*.d.ts"], 41 | rules: { 42 | "@typescript-eslint/no-unused-vars": "off", 43 | }, 44 | }, 45 | ], 46 | }; 47 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "enabled": false 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/check.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | os: 16 | - ubuntu-latest 17 | 18 | steps: 19 | - uses: actions/checkout@v2 20 | - name: Read .nvmrc 21 | run: echo ::set-output name=NVMRC::$(cat .nvmrc) 22 | id: nvm 23 | 24 | - name: Setup Node.js 25 | uses: actions/setup-node@v2.1.2 26 | with: 27 | node-version: "${{ steps.nvm.outputs.NVMRC }}" 28 | - run: yarn install --frozen-lockfile 29 | - run: yarn lint 30 | - run: yarn test 31 | - run: yarn build 32 | env: 33 | CI: true 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .eslintcache 2 | node_modules 3 | 4 | .next 5 | out 6 | 7 | dist 8 | .rts2_cache* 9 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 13.8.0 2 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingComma: "es5" 3 | }; 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.2.3](https://github.com/joe-bell/raam/compare/v0.2.2...v0.2.3) (2020-09-07) 7 | 8 | **Note:** Version bump only for package root 9 | 10 | ## [0.2.2](https://github.com/joe-bell/raam/compare/v0.2.1...v0.2.2) (2020-09-07) 11 | 12 | ### Bug Fixes 13 | 14 | - add missing key to Flex child components ([c08d64c](https://github.com/joe-bell/raam/commit/c08d64ccb81da5bd9714dbc401be667c8be2bc06)) 15 | - avoid rendering empty children ([b9c9a8d](https://github.com/joe-bell/raam/commit/b9c9a8d6b217733a142a1942afabb38c526c9732)) 16 | 17 | ## [0.2.1](https://github.com/joe-bell/raam/compare/v0.2.0...v0.2.1) (2020-06-20) 18 | 19 | ### Bug Fixes 20 | 21 | - add fallback values ([3ee6df6](https://github.com/joe-bell/raam/commit/3ee6df600ec724ee0a6f64ede95305491b5981d6)) 22 | - add workaround for type conflict ([b5f0e29](https://github.com/joe-bell/raam/commit/b5f0e29da1814abb9ba4d401b00c706ba95b3506)) 23 | - update workflow to reflect branch change ([dae4778](https://github.com/joe-bell/raam/commit/dae47783d4335d208cbd7377d5bae75d88da9243)) 24 | 25 | # [0.2.0](https://github.com/joe-bell/raam/compare/v0.1.1...v0.2.0) (2020-04-10) 26 | 27 | ### Features 28 | 29 | - **flex:** use custom system, pass flex item styles to child ([b8c9828](https://github.com/joe-bell/raam/commit/b8c9828be13890a6400c8af18799a4e69df5a31e)) 30 | 31 | ## [0.1.1](https://github.com/joe-bell/raam/compare/v0.1.0...v0.1.1) (2020-04-10) 32 | 33 | ### Bug Fixes 34 | 35 | - allow for use without a ThemeProvider ([8b53da7](https://github.com/joe-bell/raam/commit/8b53da75cc3336b7e4131b5374938adce03a1afb)) 36 | - spelling error (good spot [@peduarte](https://github.com/peduarte)) ([ed91c1a](https://github.com/joe-bell/raam/commit/ed91c1a5acab525a056e0e42f46a8ad9bd9e81b6)) 37 | - update system font stack ([4c39e62](https://github.com/joe-bell/raam/commit/4c39e6229563cff886394b67c94d30289152a5e9)) 38 | 39 | # [0.1.0](https://github.com/joe-bell/raam/compare/v0.0.7...v0.1.0) (2020-04-08) 40 | 41 | ### Bug Fixes 42 | 43 | - switch to yarn due to dep conflicts ([380ff35](https://github.com/joe-bell/raam/commit/380ff35c1d079510f2194b99051136da1ed1e564)) 44 | 45 | ### Features 46 | 47 | - support strings and numbers ([833e830](https://github.com/joe-bell/raam/commit/833e8309e757616569b9dca97fdb1e8789aee4fc)) 48 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team on Twitter (@joebell\_). All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Joe Bell 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > ⚠️ **Deprecated** 2 | > 3 | > Flexbox `gap` is relatively [well-supported](https://caniuse.com/flexbox-gap) now, you should use it instead. 4 | 5 |

6 | 7 | raam 8 | 9 |

10 | 11 |
12 |

raam (estonian) ˈrɑːm n. frame

13 |
14 | 15 |

16 | 17 | Beautifully boring cosmetic-free React.js components for structure and layout. 18 | 19 |

20 | 21 |

Read the Docs 📖

22 | 23 |

24 | 25 | NPM Version 26 | 27 | 28 | Types Included 29 | 30 | 31 | MIT License 32 | 33 | 34 | NPM Downloads 35 | 36 | 37 | Follow @joebell_ on Twitter 38 | 39 |

40 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | test: { 4 | presets: ["@babel/env", "@babel/react", "@babel/preset-typescript"], 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "version": "0.2.3", 4 | "npmClient": "yarn", 5 | "useWorkspaces": true, 6 | "command": { 7 | "publish": { 8 | "conventionalCommits": true 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /lint-staged.config.js: -------------------------------------------------------------------------------- 1 | const eslint = filenames => 2 | `eslint --cache --fix --ignore-path .gitignore --fix --ext .js,.jsx,.ts,.tsx ${ 3 | !filenames || filenames.length > 10 ? "." : filenames.join(" ") 4 | }`; 5 | 6 | module.exports = { 7 | "**/*.{json,html,css,md,mdx,yml}": filenames => 8 | filenames.map(filename => `prettier --write '${filename}'`), 9 | "**/*.js?(x)": filenames => eslint(filenames), 10 | "**/*.ts?(x)": () => [`yarn lint:ts`, eslint()], 11 | }; 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "root", 4 | "scripts": { 5 | "build": "lerna run prebuild && lerna run build", 6 | "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", 7 | "dev": "lerna run dev --parallel", 8 | "lint": "lerna run lint && yarn lint:es -- .", 9 | "lint:es": "eslint --ignore-path .gitignore --fix --ext .js,.jsx,.ts,.tsx", 10 | "lint:ts": "lerna run lint:ts", 11 | "test": "jest", 12 | "commit": "git-cz" 13 | }, 14 | "workspaces": [ 15 | "packages/*" 16 | ], 17 | "config": { 18 | "commitizen": { 19 | "path": "cz-conventional-changelog" 20 | } 21 | }, 22 | "husky": { 23 | "hooks": { 24 | "pre-commit": "lint-staged" 25 | } 26 | }, 27 | "jest": { 28 | "testMatch": [ 29 | "**/packages/**/test/*.{ts,tsx}" 30 | ], 31 | "snapshotSerializers": [ 32 | "jest-emotion" 33 | ] 34 | }, 35 | "devDependencies": { 36 | "@babel/core": "7.11.6", 37 | "@babel/preset-env": "7.11.5", 38 | "@babel/preset-react": "7.10.4", 39 | "@babel/preset-typescript": "7.10.4", 40 | "@types/node": "14.11.5", 41 | "@types/react": "16.9.51", 42 | "@types/styled-system": "5.1.10", 43 | "@types/theme-ui": "0.3.4", 44 | "@typescript-eslint/eslint-plugin": "2.34.0", 45 | "@typescript-eslint/parser": "2.34.0", 46 | "babel-jest": "26.3.0", 47 | "barrelsby": "2.2.0", 48 | "commitizen": "4.1.2", 49 | "csstype": "3.0.3", 50 | "cz-conventional-changelog": "3.3.0", 51 | "eslint": "6.8.0", 52 | "eslint-config-prettier": "6.12.0", 53 | "eslint-plugin-jsx-a11y": "6.3.1", 54 | "eslint-plugin-prettier": "3.1.4", 55 | "eslint-plugin-react": "7.21.2", 56 | "husky": "4.3.0", 57 | "jest": "26.4.2", 58 | "jest-emotion": "10.0.32", 59 | "lerna": "3.22.1", 60 | "lint-staged": "10.2.13", 61 | "microbundle": "0.12.4", 62 | "prettier": "1.19.1", 63 | "react-test-renderer": "16.13.1", 64 | "rimraf": "3.0.2", 65 | "typescript": "4.0.2" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /packages/docs/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.2.3](https://github.com/joe-bell/raam/compare/v0.2.2...v0.2.3) (2020-09-07) 7 | 8 | **Note:** Version bump only for package docs 9 | 10 | ## [0.2.2](https://github.com/joe-bell/raam/compare/v0.2.1...v0.2.2) (2020-09-07) 11 | 12 | **Note:** Version bump only for package docs 13 | 14 | ## [0.2.1](https://github.com/joe-bell/raam/compare/v0.2.0...v0.2.1) (2020-06-20) 15 | 16 | **Note:** Version bump only for package docs 17 | 18 | # [0.2.0](https://github.com/joe-bell/raam/compare/v0.1.1...v0.2.0) (2020-04-10) 19 | 20 | ### Features 21 | 22 | - **flex:** use custom system, pass flex item styles to child ([b8c9828](https://github.com/joe-bell/raam/commit/b8c9828be13890a6400c8af18799a4e69df5a31e)) 23 | 24 | ## [0.1.1](https://github.com/joe-bell/raam/compare/v0.1.0...v0.1.1) (2020-04-10) 25 | 26 | ### Bug Fixes 27 | 28 | - spelling error (good spot [@peduarte](https://github.com/peduarte)) ([ed91c1a](https://github.com/joe-bell/raam/commit/ed91c1a5acab525a056e0e42f46a8ad9bd9e81b6)) 29 | - update system font stack ([4c39e62](https://github.com/joe-bell/raam/commit/4c39e6229563cff886394b67c94d30289152a5e9)) 30 | 31 | # [0.1.0](https://github.com/joe-bell/raam/compare/v0.0.7...v0.1.0) (2020-04-08) 32 | 33 | ### Bug Fixes 34 | 35 | - switch to yarn due to dep conflicts ([380ff35](https://github.com/joe-bell/raam/commit/380ff35c1d079510f2194b99051136da1ed1e564)) 36 | -------------------------------------------------------------------------------- /packages/docs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["next/babel"], 3 | }; 4 | -------------------------------------------------------------------------------- /packages/docs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /packages/docs/next.config.js: -------------------------------------------------------------------------------- 1 | const remarkSlug = require("remark-slug"); 2 | 3 | const withMDX = require("@next/mdx")({ 4 | extension: /\.mdx?$/, 5 | options: { 6 | remarkPlugins: [remarkSlug], 7 | }, 8 | }); 9 | 10 | module.exports = withMDX({ 11 | pageExtensions: ["ts", "tsx", "md", "mdx"], 12 | }); 13 | -------------------------------------------------------------------------------- /packages/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "docs", 4 | "version": "0.2.3", 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build && next export", 8 | "clean": "rimraf {.next,out}", 9 | "lint:ts": "npx tsc --noEmit", 10 | "test": "echo \"Error: no test specified\" && exit 1", 11 | "start": "next start", 12 | "vercel": "yarn --cwd ../../ build && yarn build" 13 | }, 14 | "dependencies": { 15 | "@mdx-js/loader": "1.6.18", 16 | "@next/mdx": "9.5.3", 17 | "next": "9.5.5", 18 | "next-google-fonts": "1.2.1", 19 | "prism-react-renderer": "1.1.1", 20 | "raam": "^0.2.3", 21 | "react": "16.13.1", 22 | "react-dom": "16.13.1", 23 | "react-live": "2.2.2", 24 | "remark-slug": "6.0.0", 25 | "theme-ui": "0.3.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/docs/public/img/favicon@192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe-bell/raam/59da4826bcc97e660fae1549b3d4085dc48857cf/packages/docs/public/img/favicon@192.png -------------------------------------------------------------------------------- /packages/docs/public/img/icon@128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe-bell/raam/59da4826bcc97e660fae1549b3d4085dc48857cf/packages/docs/public/img/icon@128.png -------------------------------------------------------------------------------- /packages/docs/public/img/icon@192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe-bell/raam/59da4826bcc97e660fae1549b3d4085dc48857cf/packages/docs/public/img/icon@192.png -------------------------------------------------------------------------------- /packages/docs/public/img/icon@512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe-bell/raam/59da4826bcc97e660fae1549b3d4085dc48857cf/packages/docs/public/img/icon@512.png -------------------------------------------------------------------------------- /packages/docs/public/img/logo-og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe-bell/raam/59da4826bcc97e660fae1549b3d4085dc48857cf/packages/docs/public/img/logo-og.png -------------------------------------------------------------------------------- /packages/docs/public/img/logo-readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe-bell/raam/59da4826bcc97e660fae1549b3d4085dc48857cf/packages/docs/public/img/logo-readme.png -------------------------------------------------------------------------------- /packages/docs/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "raam", 3 | "description": "Beautifully boring cosmetic-free React.js components for structure and layout", 4 | "icons": [ 5 | { 6 | "src": "/img/icon@128.png", 7 | "type": "image/png", 8 | "sizes": "128x128" 9 | }, 10 | { 11 | "src": "/img/icon@192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "/img/icon@512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": "/", 22 | "display": "standalone", 23 | "scope": "/" 24 | } 25 | -------------------------------------------------------------------------------- /packages/docs/src/components/code/code.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, Box, Heading, Link } from "theme-ui"; 3 | import Highlight, { defaultProps } from "prism-react-renderer"; 4 | import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"; 5 | import * as Raam from "raam"; 6 | 7 | const Code = ({ children, className, live }) => { 8 | const language = className.replace(/language-/, ""); 9 | if (live) { 10 | return ( 11 | 19 | "/** @jsx jsx */" + code} 22 | scope={{ jsx, Box, Heading, Link, ...Raam }} 23 | > 24 | 32 | 36 | 46 | 47 | 48 | ); 49 | } 50 | return ( 51 | 52 | {({ className, style, tokens, getLineProps, getTokenProps }) => ( 53 | 54 | {tokens.map((line, i) => ( 55 |
56 | {line.map((token, key) => ( 57 | 58 | ))} 59 |
60 | ))} 61 | 62 | )} 63 | 64 | ); 65 | }; 66 | 67 | export default Code; 68 | -------------------------------------------------------------------------------- /packages/docs/src/components/code/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import dynamic from "next/dynamic"; 3 | 4 | const CodeDynamic = dynamic(() => import("./code")); 5 | 6 | export default props => ; 7 | -------------------------------------------------------------------------------- /packages/docs/src/components/head.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import * as React from "react"; 3 | import NextHead from "next/head"; 4 | import GoogleFonts from "next-google-fonts"; 5 | import { jsx, useThemeUI } from "theme-ui"; 6 | import config from "../config"; 7 | import { PlausibleSnippet } from "../lib/plausible"; 8 | 9 | const Head: React.FC = () => { 10 | const { theme } = useThemeUI(); 11 | 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | {config.meta.title} 20 | 21 | {process.env.NODE_ENV === "production" && } 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default Head; 50 | -------------------------------------------------------------------------------- /packages/docs/src/components/headings.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, NavLink } from "theme-ui"; 3 | 4 | const heading = Tag => props => { 5 | if (!props.id) return ; 6 | return ( 7 | 8 | 17 | {props.children} 18 | 19 | 20 | ); 21 | }; 22 | 23 | const components = { 24 | h1: heading("h1"), 25 | h2: heading("h2"), 26 | h3: heading("h3"), 27 | h4: heading("h4"), 28 | h5: heading("h5"), 29 | h6: heading("h6"), 30 | }; 31 | 32 | export default components; 33 | -------------------------------------------------------------------------------- /packages/docs/src/components/layout.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import * as React from "react"; 3 | import { jsx, Box, Container, Heading, NavLink } from "theme-ui"; 4 | import { Wrap } from "raam"; 5 | import Head from "./head"; 6 | import ToggleColorMode from "./toggle-color-mode"; 7 | import config from "../config"; 8 | 9 | const border = { 10 | border: "thick", 11 | borderColor: "border", 12 | }; 13 | 14 | const gap = 3; 15 | 16 | const Layout: React.FC = ({ children }) => ( 17 | <> 18 | 19 | 30 | 37 | 38 | raam 39 | 40 | 41 | 48 | 49 | {config.navigation.map(item => ( 50 | 51 | {item.title} 52 | 53 | ))} 54 | 55 | 63 | 64 | 65 | 66 | 67 | 68 | {children} 69 | 70 | 71 | 72 | 73 | © 2020{" "} 74 | 75 | {config.meta.author} 76 | 77 | 78 | 79 | 80 | ); 81 | 82 | export default Layout; 83 | -------------------------------------------------------------------------------- /packages/docs/src/components/toggle-color-mode.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import * as React from "react"; 3 | import { 4 | jsx, 5 | useColorMode, 6 | useThemeUI, 7 | IconButton, 8 | IconButtonProps, 9 | } from "theme-ui"; 10 | 11 | const ToggleColorMode: React.FC = ({ sx, ...props }) => { 12 | const [mode, setMode] = useColorMode(); 13 | const { theme } = useThemeUI(); 14 | const circleStroke = theme.borderWidths["thick"]; 15 | const circleSize = 20; 16 | const circlePosition = circleSize / 2; 17 | 18 | return ( 19 | { 23 | e.preventDefault(); 24 | setMode(mode === "dark" ? "default" : "dark"); 25 | }} 26 | sx={{ cursor: "pointer", ...sx }} 27 | {...props} 28 | > 29 | 36 | 44 | 49 | 50 | 51 | ); 52 | }; 53 | 54 | export default ToggleColorMode; 55 | -------------------------------------------------------------------------------- /packages/docs/src/config.ts: -------------------------------------------------------------------------------- 1 | import manifest from "../public/manifest.json"; 2 | 3 | const domain = "raam.joebell.co.uk"; 4 | 5 | const social = { 6 | github: "joe-bell", 7 | twitter: "joebell_", 8 | }; 9 | 10 | const config = { 11 | navigation: [ 12 | { 13 | title: "Components", 14 | url: "#components", 15 | }, 16 | { 17 | title: "Getting Started", 18 | url: "#getting-started", 19 | }, 20 | { 21 | title: "GitHub", 22 | url: `https://github.com/${social.github}/raam`, 23 | external: true, 24 | }, 25 | { 26 | title: "Twitter", 27 | url: `https://twitter.com/${social.twitter}`, 28 | external: true, 29 | }, 30 | ], 31 | meta: { 32 | title: manifest.name, 33 | description: manifest.description, 34 | author: "Joe Bell", 35 | domain, 36 | url: `https://${domain}`, 37 | social, 38 | }, 39 | }; 40 | 41 | export default config; 42 | -------------------------------------------------------------------------------- /packages/docs/src/lib/plausible.tsx: -------------------------------------------------------------------------------- 1 | // File sourced from https://github.com/4lejandrito/next-plausible 2 | // (with modifications) 3 | 4 | import * as React from "react"; 5 | import config from "../config"; 6 | 7 | export const PlausibleSnippet: React.FC = () => ( 8 |