Repository: nice-boys/components Branch: master Commit: d0dd86cb5018 Files: 46 Total size: 32.8 KB Directory structure: gitextract_2wa2j_48/ ├── .github/ │ └── workflows/ │ └── main.yml ├── .gitignore ├── .npmignore ├── .prettierrc ├── .storybook/ │ ├── addons.js │ ├── config.js │ └── webpack.config.js ├── .yarnclean ├── README.md ├── now.json ├── package.json ├── src/ │ ├── BaseStyles/ │ │ ├── BaseStyles.stories.tsx │ │ └── index.tsx │ ├── Button/ │ │ ├── Button.stories.tsx │ │ ├── Danger.tsx │ │ ├── Ghost.tsx │ │ ├── Join.tsx │ │ ├── Outline.tsx │ │ ├── Primary.tsx │ │ ├── Tab.tsx │ │ ├── Text.tsx │ │ ├── base.tsx │ │ └── index.tsx │ ├── Card/ │ │ ├── Card.stories.tsx │ │ ├── Card.tsx │ │ └── index.tsx │ ├── Nav/ │ │ ├── Nav.stories.tsx │ │ ├── Nav.tsx │ │ ├── components/ │ │ │ ├── Content.tsx │ │ │ ├── Item.tsx │ │ │ ├── Navbar.tsx │ │ │ └── Wrapper.tsx │ │ └── index.tsx │ ├── Spinner/ │ │ ├── Donut.tsx │ │ ├── Spinner.stories.tsx │ │ ├── Spinner.tsx │ │ └── index.tsx │ ├── Tooltip/ │ │ ├── Tooltip.stories.tsx │ │ ├── Tooltip.tsx │ │ └── index.tsx │ ├── index.ts │ └── theme.ts ├── tsconfig.json └── types/ ├── @storybook/ │ └── addon-actions.d.ts ├── react-storybook-addons-props-combinations.d.ts └── styled-normalize.d.ts ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/workflows/main.yml ================================================ name: CI on: [push] jobs: build: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@master - name: Install Node.js 12.x uses: actions/setup-node@master with: node-version: 12.x - uses: actions/cache@preview with: path: ~/.cache/yarn key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }} restore-keys: | ${{ runner.os }}-yarn- - name: Install dependencies run: yarn install --frozen-lockfile - name: Lint run: yarn run lint - name: Typecheck run: yarn tsc - name: Build run: yarn run build ================================================ FILE: .gitignore ================================================ node_modules .DS_Store .vscode dist .rts2_cache_* .storybook-dist ================================================ FILE: .npmignore ================================================ .storybook node_modules .DS_Store .vscode .rts2_cache_* .storybook-dist now.json ================================================ FILE: .prettierrc ================================================ {} ================================================ FILE: .storybook/addons.js ================================================ import "@storybook/addon-actions/register"; import "@storybook/addon-links/register"; import "@storybook/addon-storysource/register"; import "@storybook/addon-viewport/register"; ================================================ FILE: .storybook/config.js ================================================ import React from "react"; import prettyFormat from "pretty-format"; import { configure, addDecorator } from "@storybook/react"; import { setDefaults } from "react-storybook-addon-props-combinations"; import "@storybook/addon-console"; import { BaseStyles } from "../src"; addDecorator(storyFn => ( <> {storyFn()} )); // automatically import all files ending in *.stories.js const req = require.context("../src", true, /\.stories\.(js|tsx?)$/); function loadStories() { req.keys().forEach(filename => req(filename)); } setDefaults({ CombinationRenderer: ({ Component, props }) => { const el = ; return (
{el} 
          {prettyFormat(el, {
            plugins: [prettyFormat.plugins.ReactElement]
          })}
); } }); configure(loadStories, module); ================================================ FILE: .storybook/webpack.config.js ================================================ module.exports = ({ config, mode }) => { config.module.rules.push({ test: /\.tsx?$/, use: [ { loader: require.resolve("babel-loader"), options: { presets: [["react-app", { flow: false, typescript: true }]] } } ] }); config.resolve.extensions.push(".ts", ".tsx"); config.module.rules.push({ test: /\.stories\.tsx?$/, loaders: [ { loader: require.resolve("@storybook/addon-storysource/loader"), options: { parser: "typescript" } } ], enforce: "pre" }); return config; }; ================================================ FILE: .yarnclean ================================================ @types/react-native ================================================ FILE: README.md ================================================ # `@nice-boys/components` Our React component library to quickly plug together products. Used in conjunction with our [product-boilerplate](https://github.com/nice-boys/product-boilerplate). ## Documentation **[Visit the Storybook for examples of all components](https://components.nice-boys.now.sh)** This component library is based on: - [styled-components](https://styled-components.com) - [styled-system](https://github.com/jxnblk/styled-system) - [rebass](https://rebassjs.org) Recommended usage is with [rebass](https://rebassjs.org), this library does not re-export those core primitives (Flex, Box, etc). --- ## Contributing ### Local development We use Storybook to develop the component library locally. To start Storybook locally, run: ``` yarn run dev ``` Any `.stories.js` file will be picked up by Storybook. See their doc on [how to write stories](https://storybook.js.org/docs/basics/writing-stories/) to learn more. ### Using your local version in an app There are three steps to use your local version of `@nice-boys/components` in an app for development: 1. **Link `@nice-boys/components` globally**: Run `yarn link` in the `@nice-boys/components` directory to link the package globally (you only have to do that once on your machine) 2. **Tell your app to use your local version of `@nice-boys/components`**: Run `yarn link @nice-boys/components` in your app directory that depends on the package (you only have to do this once per app) 3. **Rebuild the components on any change**: Run `yarn run build:watch` in the components dir to make sure the library rebuilds every time you change/add/remove a component That's it! | @nice-boys/components | yourapp | | --------------------- | ------------------------------- | | yarn link | yarn link @nice-boys/components | | yarn run build:watch | yarn run dev | If you want to use the remote version in your app again, simply run `yarn unlink @nice-boys/components` in the app directory. ## License Licensed under the MIT license. Copyright © 2019 Max Stoiber ================================================ FILE: now.json ================================================ { "version": 2, "name": "@nice-boys/components", "alias": "components.nice-boys.now.sh", "scope": "nice-boys", "builds": [ { "src": "package.json", "use": "@now/static-build", "config": { "distDir": ".storybook-dist" } } ] } ================================================ FILE: package.json ================================================ { "name": "@nice-boys/components", "version": "0.2.0", "description": "Nice Boys component library", "source": "src/index.ts", "main": "dist/nice-boys-components.js", "umd:main": "dist/nice-boys-components.umd.js", "types": "dist/index.d.ts", "repository": "https://github.com/nice-boys/components", "author": "Max Stoiber", "license": "MIT", "private": false, "scripts": { "dev": "start-storybook -p 6006", "build:watch": "microbundle watch --jsx React.createElement", "build": "microbundle --jsx React.createElement", "lint": "eslint src --ext .js,.ts,.tsx", "test": "yarn run lint", "now-build": "build-storybook -c .storybook -o .storybook-dist", "prepublishOnly": "yarn run build" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "eslintConfig": { "parser": "@typescript-eslint/parser", "parserOptions": { "project": "./tsconfig.json" }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "prettier/@typescript-eslint", "react-app" ], "plugins": [ "react-hooks" ], "rules": { "@typescript-eslint/explicit-function-return-type": 0, "@typescript-eslint/explicit-member-accessibility": 0, "@typescript-eslint/no-empty-interface": 0, "@typescript-eslint/no-var-requires": 0, "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn" } }, "lint-staged": { "*.{js,ts,tsx}": [ "eslint --fix", "prettier --write", "git add" ], "*.{css,json,md,mdx}": [ "prettier --write", "git add" ] }, "peerDependencies": { "react": ">= 15.0.0", "styled-components": ">= 4.0.0" }, "devDependencies": { "@babel/core": "^7.4.5", "@storybook/addon-actions": "5.0.11", "@storybook/addon-console": "^1.1.0", "@storybook/addon-info": "5.0.11", "@storybook/addon-links": "5.0.11", "@storybook/addon-storysource": "5.0.11", "@storybook/addon-viewport": "5.0.11", "@storybook/addons": "5.0.11", "@storybook/react": "5.0.11", "@types/react": "^16.8.19", "@types/rebass": "^3.0.4", "@types/storybook__react": "^4.0.1", "@types/styled-components": "^4.4.0", "@types/styled-system": "^4.2.1", "@typescript-eslint/eslint-plugin": "^1.6.0", "@typescript-eslint/parser": "^1.6.0", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.6", "eslint": "^5.16.0", "eslint-config-prettier": "^6.11.0", "eslint-config-react-app": "^3.0.8", "eslint-loader": "3.0.2", "eslint-plugin-flowtype": "2.50.1", "eslint-plugin-import": "2.14.0", "eslint-plugin-jsx-a11y": "6.1.2", "eslint-plugin-react": "7.16.0", "eslint-plugin-react-hooks": "^1.6.0", "husky": "^3.1.0", "lint-staged": "^9.4.3", "microbundle": "^0.11.0", "prettier": "^1.17.1", "react": "^16.8.6", "react-docgen-typescript-loader": "^3.1.0", "react-storybook-addon-props-combinations": "^1.1.0", "styled-components": "^4.2.0" }, "dependencies": { "@tippy.js/react": "^2.2.0", "react-feather": "^2.0.3", "rebass": "^3.x.x", "styled-normalize": "^8.x.x", "styled-system": "^4.x.x" } } ================================================ FILE: src/BaseStyles/BaseStyles.stories.tsx ================================================ import React from "react"; import { storiesOf } from "@storybook/react"; import { BaseStyles } from "./"; storiesOf("BaseStyles", module).add("Global", () => ( <> This component sets the base styles, including normalize.css (see the grey background and no margin of the whole page) )); ================================================ FILE: src/BaseStyles/index.tsx ================================================ import { createGlobalStyle } from "styled-components"; import normalize from "styled-normalize"; import { theme } from "../theme"; export const BaseStyles = createGlobalStyle` ${normalize} html { font-size: 16px; line-height: 1.5; background-color: ${theme.ui.wash}; color: ${theme.text.primary}; padding: 0; margin: 0; -webkit-font-smoothing: antialiased; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; } html, body, #__next { height: 100%; } `; ================================================ FILE: src/Button/Button.stories.tsx ================================================ import { storiesOf } from "@storybook/react"; import withPropsCombinations from "react-storybook-addon-props-combinations"; import { action } from "@storybook/addon-actions"; import { PrimaryButton, DangerButton, GhostButton, JoinButton, OutlineButton, TabButton, TextButton } from "./"; storiesOf("Buttons", module) .add( "Primary", withPropsCombinations(PrimaryButton, { children: ["Click me"], size: ["small", undefined, "large"], disabled: [true, false], onClick: [action("click")] }) ) .add( "Ghost", withPropsCombinations(GhostButton, { children: ["Potential click"], size: ["small", undefined, "large"], disabled: [true, false], onClick: [action("click")] }) ) .add( "Outline", withPropsCombinations(OutlineButton, { children: ["Potential click"], size: ["small", undefined, "large"], disabled: [true, false], onClick: [action("click")] }) ) .add( "Text", withPropsCombinations(TextButton, { children: ["Potential click"], size: ["small", undefined, "large"], disabled: [true, false], onClick: [action("click")] }) ) .add( "Tab", withPropsCombinations(TabButton, { children: ["Potential click"], size: ["small", undefined, "large"], disabled: [true, false], onClick: [action("click")] }) ) .add( "Join", withPropsCombinations(JoinButton, { children: ["Join"], size: ["small", undefined, "large"], disabled: [true, false], onClick: [action("click")] }) ) .add( "Danger", withPropsCombinations(DangerButton, { children: ["Careful"], size: ["small", undefined, "large"], disabled: [true, false], onClick: [action("click")] }) ); ================================================ FILE: src/Button/Danger.tsx ================================================ import React from "react"; import styled from "styled-components"; import { theme } from "../theme"; import { styles, getPaddingFromSize, getFontSizeFromSize, ButtonProps } from "./base"; const Button = styled.button` ${styles.base}; background: linear-gradient( to top, ${theme.accent.error.seven}, ${theme.accent.error.six} ); border: 1px solid ${theme.accent.error.seven}; color: ${theme.lights.six}; &:hover { ${styles.hover}; background: linear-gradient( to top, ${theme.accent.error.six}, ${theme.accent.error.five} ); } &:active { ${styles.active}; background: linear-gradient( to top, ${theme.accent.error.five}, ${theme.accent.error.six} ); } &:focus { ${styles.focus}; box-shadow: 0 0 0 1px ${theme.ui.wash}, 0 0 0 3px ${theme.accent.error.border}; } `; export const DangerButton = (props: ButtonProps) => { const { size } = props; const { py, px } = getPaddingFromSize(size); const fontSize = getFontSizeFromSize(size); return