├── .all-contributorsrc ├── .autorc ├── .browserslistrc ├── .circleci ├── config.yml └── post-build-url.js ├── .eslintrc ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmrc ├── .storybook ├── devtools-ds-logo-dark.svg ├── devtools-ds-logo.svg ├── main.js ├── modifyWebpack.js ├── preview-head.html ├── preview.js ├── style.html └── theme-preset.js ├── .stylelintrc ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── components ├── Console │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Console.css │ │ ├── Console.test.tsx │ │ ├── __snapshots__ │ │ │ └── Console.test.tsx.snap │ │ ├── index.tsx │ │ ├── stories │ │ │ ├── Console.stories.tsx │ │ │ ├── Features.stories.tsx │ │ │ └── Overview.stories.mdx │ │ └── theme.ts │ └── tsconfig.json ├── DOMInspector │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── DOMInspector.css │ │ ├── DOMInspector.test.tsx │ │ ├── index.tsx │ │ ├── stories │ │ │ ├── DOMInspector.stories.tsx │ │ │ ├── Features.stories.tsx │ │ │ └── Overview.stories.mdx │ │ └── theme.ts │ └── tsconfig.json ├── Diagnostic │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Diagnostic.css │ │ ├── Diagnostic.test.tsx │ │ ├── index.tsx │ │ ├── stories │ │ │ ├── Diagnostic.stories.tsx │ │ │ ├── Features.stories.tsx │ │ │ └── Overview.stories.mdx │ │ └── theme.ts │ └── tsconfig.json ├── Icon │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Icon.css │ │ ├── Icon.test.tsx │ │ ├── icons │ │ │ ├── AlertIcon.tsx │ │ │ ├── ChevronDownIcon.tsx │ │ │ ├── ChevronLeftIcon.tsx │ │ │ ├── ChevronRightIcon.tsx │ │ │ ├── ChevronUpIcon.tsx │ │ │ ├── ClipboardIcon.tsx │ │ │ ├── CloseIcon.tsx │ │ │ ├── ConsoleErrorIcon.tsx │ │ │ ├── ConsoleIcon.tsx │ │ │ ├── ConsoleResultIcon.tsx │ │ │ ├── DataIcon.tsx │ │ │ ├── DebuggerIcon.tsx │ │ │ ├── DeleteIcon.tsx │ │ │ ├── ExportIcon.tsx │ │ │ ├── HistoryIcon.tsx │ │ │ ├── InfoIcon.tsx │ │ │ ├── InspectorIcon.tsx │ │ │ ├── ListIcon.tsx │ │ │ ├── MemoryIcon.tsx │ │ │ ├── MoreInfoIcon.tsx │ │ │ ├── NewWindowIcon.tsx │ │ │ ├── OdometerIcon.tsx │ │ │ ├── SearchIcon.tsx │ │ │ ├── SelectIcon.tsx │ │ │ ├── SettingsIcon.tsx │ │ │ ├── StylesIcon.tsx │ │ │ ├── WarningIcon.tsx │ │ │ ├── exports.ts │ │ │ └── mappings.ts │ │ ├── index.ts │ │ ├── props.ts │ │ └── stories │ │ │ ├── Features.stories.tsx │ │ │ ├── Icon.stories.tsx │ │ │ └── Overview.stories.mdx │ ├── svg │ │ ├── alert.svg │ │ ├── chevron-down.svg │ │ ├── chevron-left.svg │ │ ├── chevron-right.svg │ │ ├── chevron-up.svg │ │ ├── clipboard.svg │ │ ├── close.svg │ │ ├── console-error.svg │ │ ├── console-result.svg │ │ ├── console.svg │ │ ├── data.svg │ │ ├── debugger.svg │ │ ├── delete.svg │ │ ├── export.svg │ │ ├── history.svg │ │ ├── info.svg │ │ ├── inspector.svg │ │ ├── list.svg │ │ ├── memory.svg │ │ ├── more-info.svg │ │ ├── new-window.svg │ │ ├── odometer.svg │ │ ├── search.svg │ │ ├── select.svg │ │ ├── settings.svg │ │ ├── styles.svg │ │ └── warning.svg │ └── tsconfig.json ├── Navigation │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Navigation.css │ │ ├── Navigation.test.tsx │ │ ├── index.tsx │ │ ├── stories │ │ │ ├── Features.stories.tsx │ │ │ ├── Navigation.stories.tsx │ │ │ └── Overview.stories.mdx │ │ └── theme.ts │ └── tsconfig.json ├── Node │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Node.css │ │ ├── Node.test.tsx │ │ ├── index.tsx │ │ ├── stories │ │ │ ├── Features.stories.tsx │ │ │ ├── Node.stories.tsx │ │ │ └── Overview.stories.mdx │ │ └── theme.ts │ └── tsconfig.json ├── ObjectInspector │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── ObjectInspector.css │ │ ├── ObjectInspector.test.tsx │ │ ├── ObjectInspector.tsx │ │ ├── ObjectInspectorItem.tsx │ │ ├── ObjectLabel.tsx │ │ ├── ObjectValue.tsx │ │ ├── index.ts │ │ ├── stories │ │ │ ├── Examples.stories.tsx │ │ │ ├── Features.stories.tsx │ │ │ ├── ObjectInspector.stories.tsx │ │ │ ├── Overview.stories.mdx │ │ │ └── Values.stories.tsx │ │ └── theme.ts │ └── tsconfig.json ├── Table │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Table.css │ │ ├── Table.test.tsx │ │ ├── index.tsx │ │ ├── stories │ │ │ ├── Features.stories.tsx │ │ │ ├── Overview.stories.mdx │ │ │ └── Table.stories.tsx │ │ └── theme.ts │ └── tsconfig.json └── Tree │ ├── .all-contributorsrc │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ ├── Tree.css │ ├── Tree.test.tsx │ ├── TreeContext.ts │ ├── index.tsx │ ├── stories │ │ ├── Features.stories.tsx │ │ ├── Overview.stories.mdx │ │ └── Tree.stories.tsx │ └── theme.ts │ └── tsconfig.json ├── ds.config.json ├── jest.config.js ├── lerna.json ├── package.json ├── packages ├── create │ ├── CHANGELOG.md │ ├── README.md │ ├── bin │ │ └── index.js │ ├── package.json │ ├── src │ │ ├── index.tsx │ │ └── stories │ │ │ ├── Overview.stories.mdx │ │ │ └── React-TS.stories.mdx │ ├── templates │ │ └── react-ts │ │ │ ├── .circleci │ │ │ ├── build-zip.js │ │ │ ├── config.yml │ │ │ ├── firefox-updates.js │ │ │ └── updates │ │ │ │ └── updates.json │ │ │ ├── .eslintrc │ │ │ ├── .gitignore │ │ │ ├── .npmrc │ │ │ ├── README.md │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── src │ │ │ ├── assets │ │ │ │ ├── icon_128.png │ │ │ │ ├── icon_16.png │ │ │ │ └── icon_48.png │ │ │ ├── background │ │ │ │ └── background.ts │ │ │ ├── constants.ts │ │ │ ├── content │ │ │ │ └── content.ts │ │ │ ├── logger.ts │ │ │ ├── manifest.json │ │ │ ├── options │ │ │ │ └── options.tsx │ │ │ ├── panel │ │ │ │ ├── global.css │ │ │ │ ├── panel.css │ │ │ │ ├── panel.tsx │ │ │ │ └── startup.ts │ │ │ ├── popup │ │ │ │ ├── popup.css │ │ │ │ └── popup.tsx │ │ │ ├── runtime │ │ │ │ └── runtime.ts │ │ │ └── types │ │ │ │ └── index.ts │ │ │ ├── tsconfig.json │ │ │ ├── typings │ │ │ └── css.d.ts │ │ │ └── webpack.config.js │ └── tsconfig.json ├── docs │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Gallery.stories.mdx │ │ └── Welcome.stories.mdx │ └── tsconfig.json ├── object-parser │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.test.ts │ │ ├── index.ts │ │ └── stories │ │ │ └── Overview.stories.mdx │ └── tsconfig.json ├── port-controller │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.tsx │ │ └── stories │ │ │ └── Overview.stories.mdx │ └── tsconfig.json ├── storybook-theme-addon │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── register.js │ ├── src │ │ ├── constants.ts │ │ ├── index.tsx │ │ └── theme │ │ │ ├── icons │ │ │ ├── chrome-logo.png │ │ │ ├── chrome.tsx │ │ │ ├── firefox-logo.png │ │ │ └── firefox.tsx │ │ │ └── theme.tsx │ └── tsconfig.json ├── storybook-utils │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ └── index.tsx │ └── tsconfig.json └── themes │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ ├── AutoThemeProvider.tsx │ ├── index.test.ts │ ├── index.tsx │ ├── stories │ │ ├── Features.stories.tsx │ │ ├── Overview.stories.mdx │ │ ├── ThemeGrid.css │ │ └── ThemeGrid.tsx │ ├── themes.ts │ └── utils.tsx │ └── tsconfig.json ├── postcss.config.js ├── proof.config.js ├── tsconfig.build.json ├── tsconfig.json ├── tsconfig.stories.json ├── typings ├── copy-template-dir.d.ts ├── css.d.ts ├── emotion.d.ts ├── image.d.ts ├── jest-dom.d.ts ├── markdown.d.ts ├── reflect.d.ts └── storybook.d.ts └── yarn.lock /.autorc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "npm", 4 | [ 5 | "gh-pages", 6 | { 7 | "buildCommand": "yarn build:storybook", 8 | "dir": "./out" 9 | } 10 | ], 11 | "released", 12 | "first-time-contributor", 13 | "all-contributors" 14 | ], 15 | "labels": [ 16 | { 17 | "name": "new-component", 18 | "description": "A new component has been added to the design system", 19 | "changelogTitle": "🧩 New Component", 20 | "releaseType": "minor" 21 | }, 22 | { 23 | "name": "breaking-minor", 24 | "description": "Major version zero (0.y.z) is for initial development. Anything MAY change at any time.", 25 | "changelogTitle": "🔨 Breaking Minor Change", 26 | "releaseType": "minor" 27 | }, 28 | { 29 | "name": "dependency-update", 30 | "changelogTitle": "🔩 Dependency Updates", 31 | "releaseType": "none" 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 5 Chrome versions 2 | FireFox > 65 3 | Edge 18 -------------------------------------------------------------------------------- /.circleci/post-build-url.js: -------------------------------------------------------------------------------- 1 | const { execSync } = require("child_process"); 2 | 3 | const user = 4 | process.env.CIRCLE_PR_USERNAME || process.env.CIRCLE_PROJECT_USERNAME; 5 | const repo = 6 | process.env.CIRCLE_PR_REPONAME || process.env.CIRCLE_PROJECT_REPONAME; 7 | 8 | const artifacts = JSON.parse( 9 | execSync( 10 | `curl "https://circleci.com/api/v1.1/project/github/${user}/${repo}/$CIRCLE_BUILD_NUM/artifacts?circle-token=$CIRCLE_TOKEN"`, 11 | { encoding: "utf8" } 12 | ) 13 | ); 14 | 15 | console.log( 16 | `curl "https://circleci.com/api/v1.1/project/github/${user}/${repo}/${process.env.CIRCLE_BUILD_NUM}/artifacts?circle-token=$CIRCLE_TOKEN"` 17 | ); 18 | console.log(artifacts); 19 | 20 | const urls = artifacts.filter((artifact) => 21 | artifact.url.includes("index.html") 22 | ); 23 | const message = `### Build Info\n\nYour PR was successfully deployed by CircleCI [#$CIRCLE_BUILD_NUM]($CIRCLE_BUILD_URL)\n\n[Storybook](${urls[0].url})`; 24 | 25 | execSync(`yarn auto comment --context urls --message "${message}"`, { 26 | stdio: "inherit", 27 | }); 28 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@design-systems", 3 | "rules": { 4 | "no-underscore-dangle": ["error", { "allow": ["_SLOT_"] }], 5 | "@typescript-eslint/no-empty-function": 0, 6 | "@typescript-eslint/no-explicit-any": 0, 7 | "max-params": 0, 8 | "jest/no-if": 0, 9 | "jsdoc/check-param-names": 0, 10 | "@typescript-eslint/ban-types": 0 11 | }, 12 | "ignorePatterns": ["packages/create/templates/**/*"] 13 | } 14 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # These owners will be the default owners for everything in 2 | # the repo. Unless a later match takes precedence, 3 | # @global-owner1 and @global-owner2 will be requested for 4 | # review when someone opens a pull request. 5 | * @tylerkrupicka @adierkens 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve the project 4 | title: "" 5 | labels: bug 6 | assignees: "" 7 | --- 8 | 9 | **Describe the bug** 10 | 11 | 12 | 13 | **To Reproduce** 14 | 15 | 16 | 17 | **Expected behavior** 18 | 19 | 20 | 21 | **Screenshots** 22 | 23 | 24 | 25 | **Desktop (please complete the following information):** 26 | 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Node Version [e.g. 12.14.0] 30 | - Version [e.g. 22] 31 | 32 | **Additional context** 33 | 34 | 35 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: enhancement 6 | assignees: "" 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | 11 | 12 | 13 | **Describe the solution you'd like** 14 | 15 | 16 | 17 | **Describe alternatives you've considered** 18 | 19 | 20 | 21 | **Additional context** 22 | 23 | 24 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # What Changed 2 | 3 | # Why 4 | 5 | # What might be impacted 6 | 7 | Todo: 8 | 9 | - [ ] Add tests 10 | - [ ] Add docs 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.swp 3 | .idea 4 | node_modules 5 | report 6 | dist/ 7 | commonjs/ 8 | module/ 9 | target/ 10 | npm-debug.log 11 | npm-shrinkwrap.json 12 | *.iml 13 | jsconfig.json 14 | .vscode/* 15 | !.vscode/settings.json 16 | _node 17 | .nyc_output 18 | yarn-error.log 19 | package-lock.json 20 | lerna-debug.log 21 | coverage/ 22 | junit.xml 23 | out/ 24 | bundle-master 25 | bundle-pr 26 | diff.html 27 | roleFile 28 | core.* 29 | .env 30 | .eslintcache 31 | tsconfig.tsbuildinfo 32 | build-info.sh 33 | proof-junit.xml 34 | proof-a11y.json 35 | coverage -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | save-exact=true 3 | package-lock=false -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | const modifyWebpack = require("./modifyWebpack"); 4 | const { getMonorepoRoot } = require("@design-systems/cli-utils"); 5 | const { 6 | addons, 7 | stories, 8 | webpackFinal, 9 | } = require("@design-systems/storybook/preset"); 10 | 11 | const tsconfigPath = path.resolve(getMonorepoRoot(), "tsconfig.stories.json"); 12 | 13 | module.exports = { 14 | stories, 15 | addons: ["@devtools-ds/storybook-theme-addon", ...addons], 16 | presets: [ 17 | "@storybook/addon-docs/preset", 18 | path.join(__dirname, "./theme-preset.js"), 19 | ], 20 | webpackFinal: async (config) => modifyWebpack(await webpackFinal(config)), 21 | typescript: { 22 | check: true, 23 | checkOptions: { 24 | tsconfig: tsconfigPath, 25 | }, 26 | reactDocgen: "react-docgen-typescript", 27 | reactDocgenTypescriptOptions: { 28 | exclude: [ 29 | "**/src/icons/**", 30 | "**/*.stories.*", 31 | "**/create/templates/**/*", 32 | ], 33 | shouldRemoveUndefinedFromOptional: true, 34 | tsconfigPath, 35 | propFilter(prop) { 36 | if (prop.parent) { 37 | return !prop.parent.fileName.includes("@types/react"); 38 | } 39 | 40 | return true; 41 | }, 42 | }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /.storybook/modifyWebpack.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | const isCI = require("is-ci"); 3 | const fs = require("fs"); 4 | const path = require("path"); 5 | const { 6 | createGallerySpecs, 7 | getOverviewSpecs, 8 | } = require("@doc-blocks/gallery/specs"); 9 | const HtmlWebpackInsertPlugin = require("html-webpack-insert-text-plugin") 10 | .default; 11 | 12 | const mode = isCI ? "production" : "development"; 13 | 14 | module.exports = async (config) => { 15 | config.devtool = "none"; 16 | config.mode = mode; 17 | config.plugins.push( 18 | new webpack.DefinePlugin({ 19 | "process.env": { 20 | NODE_ENV: JSON.stringify(mode), 21 | }, 22 | }) 23 | ); 24 | 25 | config.plugins.push( 26 | new HtmlWebpackInsertPlugin([ 27 | { 28 | target: "iframe.html", 29 | parent: "head", 30 | text: fs.readFileSync(path.join(__dirname, "preview-head.html"), { 31 | encoding: "utf8", 32 | }), 33 | }, 34 | ]), 35 | createGallerySpecs({ 36 | specs: await getOverviewSpecs({ 37 | componentDirectory: path.join(__dirname, "../components"), 38 | }), 39 | }) 40 | ); 41 | 42 | return config; 43 | }; 44 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.storybook/style.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/theme-preset.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | const HtmlWebpackInsertTextPlugin = require("html-webpack-insert-text-plugin") 4 | .default; 5 | 6 | module.exports = { 7 | managerWebpack: async (config, options) => { 8 | config.plugins.push( 9 | new HtmlWebpackInsertTextPlugin([ 10 | { 11 | target: "index.html", 12 | parent: "head", 13 | text: fs.readFileSync( 14 | path.resolve(__dirname, "./style.html"), 15 | "utf8" 16 | ), 17 | }, 18 | ]) 19 | ); 20 | 21 | return config; 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@design-systems/stylelint-config"], 3 | "rules": { 4 | "function-calc-no-invalid": null 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | Open source projects are “living.” Contributions in the form of issues and pull requests are welcomed and encouraged. When you contribute, you explicitly say you are part of the community and abide by its Code of Conduct. 2 | 3 | # The Code 4 | 5 | At Intuit, we foster a kind, respectful, harassment-free cooperative community. Our open source community works to: 6 | 7 | - Be kind and respectful; 8 | - Act as a global community; 9 | - Conduct ourselves professionally. 10 | 11 | As members of this community, we will not tolerate behaviors including, but not limited to: 12 | 13 | - Violent threats or language; 14 | - Discriminatory or derogatory jokes or language; 15 | - Public or private harassment of any kind; 16 | - Other conduct considered inappropriate in a professional setting. 17 | 18 | ## Reporting Concerns 19 | 20 | If you see someone violating the Code of Conduct please email TechOpenSource@intuit.com 21 | 22 | ## Scope 23 | 24 | This code of conduct applies to: 25 | 26 | All repos and communities for Intuit-managed projects, whether or not the text is included in a Intuit-managed project’s repository; 27 | 28 | Individuals or teams representing projects in official capacity, such as via official social media channels or at in-person meetups. 29 | 30 | ## Attribution 31 | 32 | This Code of Conduct is partly inspired by and based on those of Amazon, CocoaPods, GitHub, Microsoft, thoughtbot, and on the Contributor Covenant version 1.4.1. 33 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | This project is open to any and all contribution from the community. This document will outline our suggested processes for making contributions. 4 | 5 | ## Issues 6 | 7 | This project uses Github Issues for: 8 | 9 | 1. Reporting bugs using the "Bug Report" template. 10 | 2. Feature requests using the "Feature Request" template. 11 | 3. General discussions or questions about the project. 12 | 13 | If you are thinking about contributing a new feature to the project, we'd prefer if you opened a "Feature Request" issue to discuss it with the project maintainers before implementing. This will make the pull request review easier since we will have already discussed all of the requirements. 14 | 15 | ## Pull Requests 16 | 17 | When opening a pull request, be sure to fill out the template and link to any relevant Github Issues. Project maintainers will provide a code review, ideally with two reviewers, before merging. 18 | 19 | ## All Contributors 20 | 21 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. When possible, we will track contributors to the project and each component. If we missed adding you to all-contributors, feel free to open a PR adding yourself and we will merge it. 22 | 23 | ## Code of Conduct 24 | 25 | All Issues and Pull Requests should follow our [Code of Conduct](./CODE_OF_CONDUCT.md). 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2020 Intuit 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 14 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 15 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 16 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 17 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 18 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 19 | OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /components/Console/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "adierkens", 15 | "name": "Adam Dierkens", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/13004162?v=4", 17 | "profile": "https://github.com/adierkens", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "design" 22 | ] 23 | }, 24 | { 25 | "login": "tylerkrupicka", 26 | "name": "Tyler Krupicka", 27 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 28 | "profile": "http://tylerkrupicka.com/", 29 | "contributions": [ 30 | "code", 31 | "doc", 32 | "design", 33 | "infra", 34 | "example", 35 | "test" 36 | ] 37 | }, 38 | { 39 | "login": "hipstersmoothie", 40 | "name": "Andrew Lisowski", 41 | "avatar_url": "https://avatars.githubusercontent.com/u/1192452?v=4", 42 | "profile": "http://hipstersmoothie.com/", 43 | "contributions": [ 44 | "code" 45 | ] 46 | } 47 | ], 48 | "contributorsPerLine": 7 49 | } 50 | -------------------------------------------------------------------------------- /components/Console/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@design-systems/test/jest.config.base'); 2 | const { name } = require('./package.json'); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name 8 | }; 9 | -------------------------------------------------------------------------------- /components/Console/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/console", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Adam Dierkens Adam_Dierkens@intuit.com", 9 | "contributors": [ 10 | "Adam Dierkens Adam_Dierkens@intuit.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": [ 18 | "*.css", 19 | "dist/esm/index.js" 20 | ], 21 | "scripts": { 22 | "clean": "ds clean", 23 | "build": "ds build", 24 | "dev": "ds dev", 25 | "storybook": "ds storybook start", 26 | "start": "ds build --watch", 27 | "test": "ds test", 28 | "lint": "ds lint", 29 | "size": "ds size" 30 | }, 31 | "dependencies": { 32 | "@babel/runtime": "7.7.2", 33 | "@devtools-ds/icon": "link:../Icon", 34 | "@devtools-ds/object-inspector": "link:../ObjectInspector", 35 | "@devtools-ds/themes": "link:../../packages/themes", 36 | "clsx": "1.1.0" 37 | }, 38 | "devDependencies": { 39 | "@devtools-ds/storybook-utils": "link:../../packages/storybook-utils" 40 | }, 41 | "peerDependencies": { 42 | "react": ">= 16.8.6" 43 | }, 44 | "files": [ 45 | "dist", 46 | "src", 47 | "!*.snippet.*", 48 | "!*theme.*", 49 | "!*.test.*", 50 | "!__snapshots__", 51 | "!__tests__" 52 | ], 53 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 54 | } 55 | -------------------------------------------------------------------------------- /components/Console/src/Console.css: -------------------------------------------------------------------------------- 1 | .console { 2 | width: 100%; 3 | font-family: Menlo, monospace; 4 | line-height: 1.5; 5 | color: @theme textColor; 6 | height: 100%; 7 | display: flex; 8 | flex-direction: column; 9 | } 10 | 11 | .input { 12 | font-family: Menlo, monospace; 13 | line-height: 1.5; 14 | background-color: transparent; 15 | border: none; 16 | width: 100%; 17 | color: @theme inputColor; 18 | margin-left: 4px; 19 | } 20 | 21 | .error { 22 | background-color: @theme errorBackgroundColor; 23 | border-top: 1px solid @theme errorBorderColor; 24 | 25 | & .icon { 26 | color: @theme errorIconColor; 27 | } 28 | 29 | .resultText { 30 | color: @theme errorTextColor; 31 | } 32 | } 33 | 34 | .warning { 35 | background-color: @theme warningBackgroundColor; 36 | border-top: 1px solid @theme warningBorderColor; 37 | 38 | & .icon { 39 | color: @theme warningIconColor; 40 | } 41 | 42 | .resultText { 43 | color: @theme warningTextColor; 44 | } 45 | } 46 | 47 | .input:focus { 48 | border: none; 49 | outline: none; 50 | } 51 | 52 | .inputWrapper { 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | border-top: 1px solid @theme dividerColor; 57 | padding-left: 8px; 58 | } 59 | 60 | .icon { 61 | box-sizing: border-box; 62 | padding: 1px 0; 63 | margin-top: 3px; 64 | height: 11px; 65 | width: 11px; 66 | } 67 | 68 | .inputWrapper .icon { 69 | margin-top: 0; 70 | } 71 | 72 | .icon-focus { 73 | color: @theme iconFocusColor; 74 | } 75 | 76 | .resultWrapper { 77 | border-top: 1px solid @theme dividerColor; 78 | } 79 | 80 | .resultLine { 81 | padding-left: 8px; 82 | display: flex; 83 | justify-content: flex-start; 84 | align-items: flex-start; 85 | } 86 | 87 | .resultText, 88 | .expressionText { 89 | margin-left: 8px; 90 | } 91 | 92 | .resultsScrollWrapper { 93 | height: 100%; 94 | overflow: auto; 95 | } 96 | 97 | .results { 98 | padding: 0; 99 | margin: 0; 100 | list-style: none; 101 | min-height: 100%; 102 | display: flex; 103 | flex-direction: column; 104 | justify-content: end; 105 | } 106 | -------------------------------------------------------------------------------- /components/Console/src/__snapshots__/Console.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Console It matches the snapshot 1`] = ` 4 |
5 |
8 |
11 |
    14 |
15 |
18 | 29 | 34 |
35 |
36 |
37 | `; 38 | -------------------------------------------------------------------------------- /components/Console/src/stories/Console.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { select } from "@storybook/addon-knobs"; 3 | import { callback } from "@devtools-ds/storybook-utils"; 4 | 5 | import { 6 | Console, 7 | ExecuteFunction, 8 | ConsoleResultDefault, 9 | ConsoleResultInspector, 10 | ConsoleExpression, 11 | } from ".."; 12 | import notes from "../../README.md"; 13 | 14 | export default { 15 | title: "Components/Console", 16 | parameters: { notes }, 17 | }; 18 | 19 | const resultComponents: { [key: string]: any } = { 20 | ConsoleResultDefault, 21 | ConsoleResultInspector, 22 | }; 23 | 24 | export const Playground = () => { 25 | const [history, setHistory] = React.useState([]); 26 | 27 | const commaEvaluate: ExecuteFunction = (expression: string) => { 28 | const run: ConsoleExpression = { 29 | id: history.length.toString(), 30 | expression, 31 | result: expression.split(" ").join(", "), 32 | }; 33 | setHistory((oldArray) => [...oldArray, run]); 34 | }; 35 | 36 | const splitEvaluate: ExecuteFunction = (expression: string) => { 37 | const run: ConsoleExpression = { 38 | id: history.length.toString(), 39 | expression, 40 | result: expression.split(" "), 41 | }; 42 | setHistory((oldArray) => [...oldArray, run]); 43 | }; 44 | 45 | const functions = { 46 | "Comma Separate": commaEvaluate, 47 | "Split Words": splitEvaluate, 48 | }; 49 | 50 | const choice = select( 51 | "Evaluation Function", 52 | ["Comma Separate", "Split Words"], 53 | "Split Words" 54 | ); 55 | 56 | const result = select( 57 | "Result Component", 58 | Object.keys(resultComponents), 59 | "ConsoleResultDefault" 60 | ); 61 | 62 | return ( 63 | `)} 67 | /> 68 | ); 69 | }; 70 | -------------------------------------------------------------------------------- /components/Console/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/DOMInspector/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "tylerkrupicka", 15 | "name": "Tyler Krupicka", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 17 | "profile": "http://tylerkrupicka.com/", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "design", 22 | "infra", 23 | "example", 24 | "test" 25 | ] 26 | } 27 | ], 28 | "contributorsPerLine": 7 29 | } 30 | -------------------------------------------------------------------------------- /components/DOMInspector/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.2 (Mon Feb 15 2021) 2 | 3 | #### 🐛 Bug Fix 4 | 5 | - fix my clone in contributors ([@tylerkrupicka](https://github.com/tylerkrupicka)) 6 | 7 | #### 📝 Documentation 8 | 9 | - Fix Component All Contributors [#10](https://github.com/intuit/devtools-ds/pull/10) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 10 | 11 | #### Authors: 1 12 | 13 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 14 | 15 | --- 16 | 17 | # v0.131.0 (Tue Jan 26 2021) 18 | 19 | #### 🚀 Enhancement 20 | 21 | - Navigation Accessibility [#4](https://github.com/intuit/devtools-ds/pull/4) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 22 | 23 | #### 🐛 Bug Fix 24 | 25 | - fix yarn links ([@tylerkrupicka](https://github.com/tylerkrupicka)) 26 | 27 | #### Authors: 1 28 | 29 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 30 | 31 | --- 32 | 33 | # v0.130.5 (Sun Jan 24 2021) 34 | 35 | #### ⚠️ Pushed to `master` 36 | 37 | - Merge branch 'master' of https://github.com/intuit/devtools-ds ([@tylerkrupicka](https://github.com/tylerkrupicka)) 38 | 39 | #### Authors: 1 40 | 41 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 42 | 43 | --- 44 | 45 | # v0.130.4 (Sun Jan 24 2021) 46 | 47 | #### ⚠️ Pushed to `master` 48 | 49 | - Merge branch 'master' of https://github.com/intuit/devtools-ds ([@tylerkrupicka](https://github.com/tylerkrupicka)) 50 | 51 | #### Authors: 1 52 | 53 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 54 | 55 | --- 56 | 57 | # vnull (Sun Jan 24 2021) 58 | 59 | #### 🐛 Bug Fix 60 | 61 | - Bump version to: v0.130.1 \[skip ci\] (https://github.com/tylerkrupicka) 62 | 63 | #### ⚠️ Pushed to `master` 64 | 65 | - set access in package json (https://github.com/tylerkrupicka) 66 | 67 | #### Authors: 1 68 | 69 | - Tyler Krupicka (https://github.com/tylerkrupicka) 70 | -------------------------------------------------------------------------------- /components/DOMInspector/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@design-systems/test/jest.config.base'); 2 | const { name } = require('./package.json'); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name 8 | }; 9 | -------------------------------------------------------------------------------- /components/DOMInspector/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/dom-inspector", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": [ 18 | "*.css", 19 | "dist/esm/index.js" 20 | ], 21 | "scripts": { 22 | "clean": "ds clean", 23 | "build": "ds build", 24 | "dev": "ds dev", 25 | "storybook": "ds storybook start", 26 | "start": "ds build --watch", 27 | "test": "ds test", 28 | "lint": "ds lint", 29 | "size": "ds size" 30 | }, 31 | "dependencies": { 32 | "@babel/runtime": "7.7.2", 33 | "@devtools-ds/node": "link:../Node", 34 | "@devtools-ds/themes": "link:../../packages/themes", 35 | "@devtools-ds/tree": "link:../Tree", 36 | "clsx": "1.1.0" 37 | }, 38 | "peerDependencies": { 39 | "react": ">= 16.8.6" 40 | }, 41 | "files": [ 42 | "dist", 43 | "src", 44 | "!*.snippet.*", 45 | "!*theme.*", 46 | "!*.test.*", 47 | "!__snapshots__", 48 | "!__tests__" 49 | ], 50 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 51 | } 52 | -------------------------------------------------------------------------------- /components/DOMInspector/src/DOMInspector.css: -------------------------------------------------------------------------------- 1 | .text { 2 | color: @theme textColor; 3 | } 4 | -------------------------------------------------------------------------------- /components/DOMInspector/src/DOMInspector.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "@testing-library/react"; 3 | import { DOMInspector } from "."; 4 | 5 | const div = document.createElement("div"); 6 | const html = ` 7 | 8 | A span 9 | A span that is filled with longer text that should probably be truncated because it is so long. 10 | `; 11 | div.insertAdjacentHTML("beforeend", html); 12 | 13 | describe("DOMInspector", () => { 14 | test("It renders a div", () => { 15 | const { getAllByText } = render(); 16 | expect(getAllByText("div")).toHaveLength(2); 17 | }); 18 | 19 | test("It expands to a level", () => { 20 | const { getByText } = render(); 21 | expect( 22 | getByText( 23 | "A span that is filled with longer text that should probably be truncated because it is so long." 24 | ) 25 | ).toBeDefined(); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /components/DOMInspector/src/stories/DOMInspector.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { select, number } from "@storybook/addon-knobs"; 4 | 5 | import { DOMInspector } from ".."; 6 | import notes from "../../README.md"; 7 | 8 | export default { 9 | title: "Components/DOM Inspector", 10 | parameters: { notes }, 11 | }; 12 | 13 | const div = document.createElement("div"); 14 | const html = ` 15 | 16 | A span 17 | A span that is filled with longer text that should probably be truncated because it is so long. 18 | 19 | 20 | 21 | `; 22 | div.insertAdjacentHTML("beforeend", html); 23 | 24 | const elements: { [key: string]: Node } = { 25 | "Simple DIV": div, 26 | "Document Body": document.body, 27 | }; 28 | 29 | export const Playground = () => { 30 | const element = select("DOM Element", Object.keys(elements), "Simple DIV"); 31 | const expandLevel = number("Expand Level", 0); 32 | 33 | return ; 34 | }; 35 | -------------------------------------------------------------------------------- /components/DOMInspector/src/stories/Features.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { DOMInspector } from ".."; 4 | import notes from "../../README.md"; 5 | 6 | export default { 7 | title: "Components/DOM Inspector/Features", 8 | parameters: { notes }, 9 | }; 10 | 11 | const div = document.createElement("div"); 12 | const html = ` 13 | 14 | A span 15 | A span that is filled with longer text that should probably be truncated because it is so long. 16 | 17 | 18 | 19 | `; 20 | div.insertAdjacentHTML("beforeend", html); 21 | 22 | export const BasicUsage = () => ; 23 | export const Expanded = () => ; 24 | 25 | export const DocumentBody = () => ; 26 | DocumentBody.story = { 27 | title: "Components/DOM Inspector/Document", 28 | }; 29 | 30 | export const Document = () => ; 31 | Document.story = { 32 | title: "Components/DOM Inspector/Document", 33 | }; 34 | -------------------------------------------------------------------------------- /components/DOMInspector/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Description, 4 | Title, 5 | Canvas, 6 | Story, 7 | } from "@storybook/addon-docs/blocks"; 8 | import { Version } from "@doc-blocks/version"; 9 | import { ShieldRow } from "@doc-blocks/shield-row"; 10 | 11 | import notes from "../../README.md"; 12 | import { version } from "../../package.json"; 13 | 14 | 15 | 16 | @devtools-ds/dom-inspector 17 | 18 | --- 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | ## Usage 32 | 33 | The `DOMInspector` allows you to inspect an HTML DOM Element, similar to the "Inspector" panel in browser devtools. 34 | For basic usage, you just pass in a DOM Element to the `data` property. 35 | 36 | 37 | 38 | 39 | 40 | ### Start Expanded 41 | 42 | You can specify an `expandLevel` to choose how many levels are open initially. 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /components/DOMInspector/src/theme.ts: -------------------------------------------------------------------------------- 1 | import { ComponentTheme, chrome, firefox } from "@devtools-ds/themes"; 2 | 3 | const DOMInspectorTheme = (): ComponentTheme => ({ 4 | firefox: { 5 | light: { 6 | textColor: firefox.light.textColor, 7 | }, 8 | dark: { 9 | textColor: firefox.dark.textColor, 10 | }, 11 | }, 12 | chrome: { 13 | light: { 14 | textColor: chrome.light.textColor, 15 | }, 16 | dark: { 17 | textColor: chrome.dark.textColor, 18 | }, 19 | }, 20 | }); 21 | 22 | export default DOMInspectorTheme; 23 | -------------------------------------------------------------------------------- /components/DOMInspector/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/Diagnostic/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "ShelbyCohen", 15 | "name": "Shelby Cohen", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/7768053?v=4", 17 | "profile": "https://github.com/ShelbyCohen", 18 | "contributions": [ 19 | "code", 20 | "design" 21 | ] 22 | }, 23 | { 24 | "login": "tylerkrupicka", 25 | "name": "Tyler Krupicka", 26 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 27 | "profile": "http://tylerkrupicka.com/", 28 | "contributions": [ 29 | "code", 30 | "doc", 31 | "design", 32 | "infra", 33 | "example", 34 | "test" 35 | ] 36 | }, 37 | { 38 | "login": "adierkens", 39 | "name": "Adam Dierkens", 40 | "avatar_url": "https://avatars.githubusercontent.com/u/13004162?v=4", 41 | "profile": "https://github.com/adierkens", 42 | "contributions": [ 43 | "design", 44 | "ideas" 45 | ] 46 | } 47 | ], 48 | "contributorsPerLine": 7 49 | } 50 | -------------------------------------------------------------------------------- /components/Diagnostic/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.2 (Mon Feb 15 2021) 2 | 3 | #### 🐛 Bug Fix 4 | 5 | - fix my clone in contributors ([@tylerkrupicka](https://github.com/tylerkrupicka)) 6 | 7 | #### 📝 Documentation 8 | 9 | - Fix Component All Contributors [#10](https://github.com/intuit/devtools-ds/pull/10) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 10 | 11 | #### Authors: 1 12 | 13 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 14 | 15 | --- 16 | 17 | # v0.131.0 (Tue Jan 26 2021) 18 | 19 | #### 🚀 Enhancement 20 | 21 | - Navigation Accessibility [#4](https://github.com/intuit/devtools-ds/pull/4) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 22 | 23 | #### 🐛 Bug Fix 24 | 25 | - add reach tabs ([@tylerkrupicka](https://github.com/tylerkrupicka)) 26 | 27 | #### Authors: 1 28 | 29 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 30 | 31 | --- 32 | 33 | # v0.130.5 (Sun Jan 24 2021) 34 | 35 | #### ⚠️ Pushed to `master` 36 | 37 | - Merge branch 'master' of https://github.com/intuit/devtools-ds ([@tylerkrupicka](https://github.com/tylerkrupicka)) 38 | 39 | #### Authors: 1 40 | 41 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 42 | 43 | --- 44 | 45 | # v0.130.4 (Sun Jan 24 2021) 46 | 47 | #### ⚠️ Pushed to `master` 48 | 49 | - Merge branch 'master' of https://github.com/intuit/devtools-ds ([@tylerkrupicka](https://github.com/tylerkrupicka)) 50 | 51 | #### Authors: 1 52 | 53 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 54 | 55 | --- 56 | 57 | # vnull (Sun Jan 24 2021) 58 | 59 | #### 🐛 Bug Fix 60 | 61 | - Bump version to: v0.130.1 \[skip ci\] (https://github.com/tylerkrupicka) 62 | 63 | #### ⚠️ Pushed to `master` 64 | 65 | - set access in package json (https://github.com/tylerkrupicka) 66 | 67 | #### Authors: 1 68 | 69 | - Tyler Krupicka (https://github.com/tylerkrupicka) 70 | -------------------------------------------------------------------------------- /components/Diagnostic/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@design-systems/test/jest.config.base'); 2 | const { name } = require('./package.json'); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name 8 | }; 9 | -------------------------------------------------------------------------------- /components/Diagnostic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/diagnostic", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com", 11 | "Shelby Cohen s.cohen131@gmail.com" 12 | ], 13 | "license": "MIT", 14 | "publishConfig": { 15 | "registry": "https://registry.npmjs.org/", 16 | "access": "public" 17 | }, 18 | "sideEffects": [ 19 | "*.css", 20 | "dist/esm/index.js" 21 | ], 22 | "scripts": { 23 | "clean": "ds clean", 24 | "build": "ds build", 25 | "dev": "ds dev", 26 | "storybook": "ds storybook start", 27 | "start": "ds build --watch", 28 | "test": "ds test", 29 | "lint": "ds lint", 30 | "size": "ds size" 31 | }, 32 | "dependencies": { 33 | "@babel/runtime": "7.7.2", 34 | "@devtools-ds/icon": "link:../Icon", 35 | "@devtools-ds/themes": "link:../../packages/themes", 36 | "@reach/auto-id": "0.12.1", 37 | "@reach/visually-hidden": "0.12.0", 38 | "clsx": "1.1.0", 39 | "vscode-languageserver-types": "3.15.1" 40 | }, 41 | "peerDependencies": { 42 | "react": ">= 16.8.6" 43 | }, 44 | "files": [ 45 | "dist", 46 | "src", 47 | "!*.snippet.*", 48 | "!*theme.*", 49 | "!*.test.*", 50 | "!__snapshots__", 51 | "!__tests__" 52 | ], 53 | "devDependencies": { 54 | "@types/color": "3.0.1", 55 | "color": "3.1.3" 56 | }, 57 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 58 | } 59 | -------------------------------------------------------------------------------- /components/Diagnostic/src/Diagnostic.css: -------------------------------------------------------------------------------- 1 | .diagnostic { 2 | font-family: Menlo, monospace; 3 | color: @theme textColor; 4 | } 5 | 6 | .icon { 7 | font-size: 1.1em; 8 | } 9 | 10 | .iconError { 11 | color: @theme errorIconColor; 12 | } 13 | 14 | .iconWarning { 15 | color: @theme warningIconColor; 16 | } 17 | 18 | .message { 19 | padding-left: 10px; 20 | color: @theme messageColor; 21 | } 22 | 23 | .wrapper { 24 | margin: 10px 0 0; 25 | } 26 | 27 | .wrapperError { 28 | background-color: @theme errorBackgroundColor; 29 | } 30 | 31 | .wrapperWarning { 32 | background-color: @theme warningBackgroundColor; 33 | } 34 | 35 | .line { 36 | width: 100%; 37 | display: block; 38 | overflow-x: hidden; 39 | text-overflow: ellipsis; 40 | } 41 | 42 | .lineError { 43 | background-color: @theme errorBackgroundLineColor; 44 | } 45 | 46 | .lineWarning { 47 | background-color: @theme warningBackgroundLineColor; 48 | } 49 | -------------------------------------------------------------------------------- /components/Diagnostic/src/stories/Diagnostic.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { select, text } from "@storybook/addon-knobs"; 3 | import { Diagnostic, DiagnosticLine } from ".."; 4 | import notes from "../../README.md"; 5 | 6 | export default { 7 | title: "Components/Diagnostic", 8 | parameters: { 9 | notes, 10 | fontSize: { 11 | fontSize: "14px", 12 | }, 13 | }, 14 | }; 15 | 16 | const lines: DiagnosticLine[] = [ 17 | { 18 | number: "60", 19 | content: "const config = loadConfig();", 20 | }, 21 | { 22 | number: "61", 23 | content: `const cli = await getApplicationDefinition(config);`, 24 | }, 25 | { 26 | number: "62", 27 | content: "const args = app(cli);", 28 | highlight: true, 29 | }, 30 | { 31 | number: "63", 32 | content: "", 33 | }, 34 | { 35 | number: "64", 36 | content: "if (!args) {", 37 | }, 38 | { 39 | number: "65", 40 | content: " return;", 41 | }, 42 | { 43 | number: "66", 44 | content: "}", 45 | }, 46 | ]; 47 | 48 | export const Playground = () => { 49 | const severity = select("severity", ["error", "warning"], "warning"); 50 | const message = text("message", "invalid data"); 51 | return ; 52 | }; 53 | -------------------------------------------------------------------------------- /components/Diagnostic/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Description, 4 | Title, 5 | Canvas, 6 | Story, 7 | } from "@storybook/addon-docs/blocks"; 8 | import { Version } from "@doc-blocks/version"; 9 | import { ShieldRow } from "@doc-blocks/shield-row"; 10 | 11 | import notes from "../../README.md"; 12 | import { version } from "../../package.json"; 13 | 14 | 15 | 16 | @devtools-ds/Diagnostic 17 | 18 | --- 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | ## Usage 32 | 33 | The `Diagnostic` takes a list of lines of code, and uses the `highlight` property to highlight a specific line. 34 | 35 | 36 | 37 | 38 | 39 | You can use the `severity` property to indicate whether the issue is a "warning" or an "error". 40 | 41 | 42 | 43 | 44 | 45 | If you are reporting errors from a [Language Server](https://code.visualstudio.com/api/language-extensions/language-server-extension-guide), 46 | you can use a utility function to convert the `vscode-languageserver-types`. 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /components/Diagnostic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/Icon/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "tylerkrupicka", 15 | "name": "Tyler Krupicka", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 17 | "profile": "http://tylerkrupicka.com/", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "design", 22 | "infra", 23 | "example", 24 | "test" 25 | ] 26 | }, 27 | { 28 | "login": "adierkens", 29 | "name": "Adam Dierkens", 30 | "avatar_url": "https://avatars.githubusercontent.com/u/13004162?v=4", 31 | "profile": "https://github.com/adierkens", 32 | "contributions": [ 33 | "code" 34 | ] 35 | }, 36 | { 37 | "login": "kharrop", 38 | "name": "kharrop", 39 | "avatar_url": "https://github.com/avatars/u/16794?", 40 | "profile": "https://github.com/kharrop", 41 | "contributions": [ 42 | "design" 43 | ] 44 | } 45 | ], 46 | "contributorsPerLine": 7 47 | } 48 | -------------------------------------------------------------------------------- /components/Icon/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.2 (Mon Feb 15 2021) 2 | 3 | #### 🐛 Bug Fix 4 | 5 | - fix my clone in contributors ([@tylerkrupicka](https://github.com/tylerkrupicka)) 6 | 7 | #### 📝 Documentation 8 | 9 | - Fix Component All Contributors [#10](https://github.com/intuit/devtools-ds/pull/10) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 10 | 11 | #### Authors: 1 12 | 13 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 14 | 15 | --- 16 | 17 | # v0.131.0 (Tue Jan 26 2021) 18 | 19 | #### 🚀 Enhancement 20 | 21 | - Navigation Accessibility [#4](https://github.com/intuit/devtools-ds/pull/4) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 22 | 23 | #### 🐛 Bug Fix 24 | 25 | - fix yarn links ([@tylerkrupicka](https://github.com/tylerkrupicka)) 26 | 27 | #### Authors: 1 28 | 29 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 30 | 31 | --- 32 | 33 | # v0.130.5 (Sun Jan 24 2021) 34 | 35 | #### ⚠️ Pushed to `master` 36 | 37 | - Merge branch 'master' of https://github.com/intuit/devtools-ds ([@tylerkrupicka](https://github.com/tylerkrupicka)) 38 | 39 | #### Authors: 1 40 | 41 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 42 | 43 | --- 44 | 45 | # v0.130.4 (Sun Jan 24 2021) 46 | 47 | #### ⚠️ Pushed to `master` 48 | 49 | - Merge branch 'master' of https://github.com/intuit/devtools-ds ([@tylerkrupicka](https://github.com/tylerkrupicka)) 50 | 51 | #### Authors: 1 52 | 53 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 54 | 55 | --- 56 | 57 | # vnull (Sun Jan 24 2021) 58 | 59 | #### 🐛 Bug Fix 60 | 61 | - Bump version to: v0.130.1 \[skip ci\] (https://github.com/tylerkrupicka) 62 | 63 | #### ⚠️ Pushed to `master` 64 | 65 | - set access in package json (https://github.com/tylerkrupicka) 66 | 67 | #### Authors: 1 68 | 69 | - Tyler Krupicka (https://github.com/tylerkrupicka) 70 | -------------------------------------------------------------------------------- /components/Icon/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | collectCoverageFrom: [...base.collectCoverageFrom, "!./src/icons/*.ts*"], 9 | }; 10 | -------------------------------------------------------------------------------- /components/Icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/icon", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": [ 18 | "*.css", 19 | "dist/esm/index.js" 20 | ], 21 | "scripts": { 22 | "clean": "ds clean", 23 | "build": "ds build", 24 | "dev": "ds dev", 25 | "generate": "icon-build --svg ./svg --out ./src/icons", 26 | "regenerate": "icon-build --svg ./svg --out ./src/icons --overwrite", 27 | "storybook": "ds storybook start", 28 | "start": "ds build --watch", 29 | "test": "ds test", 30 | "lint": "ds lint", 31 | "size": "ds size" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "7.7.2", 35 | "@design-systems/utils": "2.12.0", 36 | "@devtools-ds/themes": "link:../../packages/themes", 37 | "clsx": "1.1.0" 38 | }, 39 | "peerDependencies": { 40 | "react": ">= 16.8.6" 41 | }, 42 | "files": [ 43 | "dist", 44 | "src", 45 | "!*.snippet.*", 46 | "!*theme.*", 47 | "!*.test.*", 48 | "!__snapshots__", 49 | "!__tests__" 50 | ], 51 | "devDependencies": { 52 | "@design-systems/svg-icon-builder": "2.12.0" 53 | }, 54 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 55 | } 56 | -------------------------------------------------------------------------------- /components/Icon/src/Icon.css: -------------------------------------------------------------------------------- 1 | /* Make the icon inherit surrounding text properties. */ 2 | .inline { 3 | /* Prevent the icon from shrinking inside a flex container. */ 4 | flex-shrink: 0; 5 | /* Scale the icon to match the font-size of the parent element. */ 6 | width: auto; 7 | height: 1em; 8 | vertical-align: top; 9 | } 10 | -------------------------------------------------------------------------------- /components/Icon/src/Icon.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "@testing-library/react"; 3 | import AlertIcon from "./icons/AlertIcon"; 4 | 5 | describe("Atomic Icon", () => { 6 | test("Passes props.", () => { 7 | const { container } = render(); 8 | const icon = container.querySelector("svg") as SVGSVGElement; 9 | expect(icon.id).toBe("test"); 10 | }); 11 | 12 | test("Is hidden for screen readers.", () => { 13 | const { container } = render(); 14 | const icon = container.querySelector("svg") as SVGSVGElement; 15 | expect(icon.hasAttribute("aria-hidden")).toBe(true); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /components/Icon/src/icons/AlertIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * AlertIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const AlertIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default AlertIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ChevronDownIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ChevronDownIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ChevronDownIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ChevronDownIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ChevronLeftIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ChevronLeftIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ChevronLeftIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ChevronLeftIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ChevronRightIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ChevronRightIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ChevronRightIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ChevronRightIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ChevronUpIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ChevronUpIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ChevronUpIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ChevronUpIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ClipboardIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ClipboardIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ClipboardIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ClipboardIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/CloseIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * CloseIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const CloseIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default CloseIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ConsoleErrorIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ConsoleErrorIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ConsoleErrorIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ConsoleErrorIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ConsoleIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ConsoleIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ConsoleIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ConsoleIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ConsoleResultIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ConsoleResultIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ConsoleResultIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | 31 | ); 32 | }; 33 | 34 | export default ConsoleResultIcon; 35 | -------------------------------------------------------------------------------- /components/Icon/src/icons/DataIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * DataIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const DataIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default DataIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/DebuggerIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * DebuggerIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const DebuggerIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default DebuggerIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/DeleteIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * DeleteIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const DeleteIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default DeleteIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ExportIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ExportIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ExportIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ExportIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/HistoryIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * HistoryIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const HistoryIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default HistoryIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/InfoIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * InfoIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const InfoIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default InfoIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/InspectorIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * InspectorIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const InspectorIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default InspectorIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/ListIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * ListIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const ListIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default ListIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/MemoryIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * MemoryIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const MemoryIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default MemoryIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/MoreInfoIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * MoreInfoIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const MoreInfoIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default MoreInfoIcon; 36 | -------------------------------------------------------------------------------- /components/Icon/src/icons/NewWindowIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * NewWindowIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const NewWindowIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default NewWindowIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/OdometerIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * OdometerIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const OdometerIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default OdometerIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/SearchIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * SearchIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const SearchIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default SearchIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/SelectIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * SelectIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const SelectIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 32 | 33 | ); 34 | }; 35 | 36 | export default SelectIcon; 37 | -------------------------------------------------------------------------------- /components/Icon/src/icons/SettingsIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * SettingsIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const SettingsIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default SettingsIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/StylesIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * StylesIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const StylesIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default StylesIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/WarningIcon.tsx: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | import React from "react"; 3 | import makeClass from "clsx"; 4 | import { IconProps, IconSizes } from "../props"; 5 | 6 | import styles from "../Icon.css"; 7 | 8 | /** 9 | * WarningIcon 10 | * 11 | * @param iconProps - SVG props 12 | */ 13 | const WarningIcon = (iconProps: IconProps) => { 14 | const { className, fill, size, inline, ...html } = iconProps; 15 | const iconSize = size ? IconSizes[size] : undefined; 16 | 17 | return ( 18 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default WarningIcon; 34 | -------------------------------------------------------------------------------- /components/Icon/src/icons/exports.ts: -------------------------------------------------------------------------------- 1 | /* Warning: this file is generated using svg-icon-builder */ 2 | 3 | export { default as AlertIcon } from "./AlertIcon"; 4 | export { default as ChevronDownIcon } from "./ChevronDownIcon"; 5 | export { default as ChevronLeftIcon } from "./ChevronLeftIcon"; 6 | export { default as ChevronRightIcon } from "./ChevronRightIcon"; 7 | export { default as ChevronUpIcon } from "./ChevronUpIcon"; 8 | export { default as ClipboardIcon } from "./ClipboardIcon"; 9 | export { default as CloseIcon } from "./CloseIcon"; 10 | export { default as ConsoleErrorIcon } from "./ConsoleErrorIcon"; 11 | export { default as ConsoleResultIcon } from "./ConsoleResultIcon"; 12 | export { default as ConsoleIcon } from "./ConsoleIcon"; 13 | export { default as DataIcon } from "./DataIcon"; 14 | export { default as DebuggerIcon } from "./DebuggerIcon"; 15 | export { default as DeleteIcon } from "./DeleteIcon"; 16 | export { default as ExportIcon } from "./ExportIcon"; 17 | export { default as HistoryIcon } from "./HistoryIcon"; 18 | export { default as InfoIcon } from "./InfoIcon"; 19 | export { default as InspectorIcon } from "./InspectorIcon"; 20 | export { default as ListIcon } from "./ListIcon"; 21 | export { default as MemoryIcon } from "./MemoryIcon"; 22 | export { default as MoreInfoIcon } from "./MoreInfoIcon"; 23 | export { default as NewWindowIcon } from "./NewWindowIcon"; 24 | export { default as OdometerIcon } from "./OdometerIcon"; 25 | export { default as SearchIcon } from "./SearchIcon"; 26 | export { default as SelectIcon } from "./SelectIcon"; 27 | export { default as SettingsIcon } from "./SettingsIcon"; 28 | export { default as StylesIcon } from "./StylesIcon"; 29 | export { default as WarningIcon } from "./WarningIcon"; 30 | -------------------------------------------------------------------------------- /components/Icon/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./icons/exports"; 2 | export * from "./props"; 3 | -------------------------------------------------------------------------------- /components/Icon/src/props.ts: -------------------------------------------------------------------------------- 1 | import { Element, OneOf3 } from "@design-systems/utils"; 2 | 3 | export type Sizes = ["small", "medium", "large", "x-large"]; 4 | 5 | export const IconSizes = { 6 | small: "12px", 7 | medium: "16px", 8 | large: "20px", 9 | "x-large": "24px", 10 | } as const; 11 | 12 | export interface IconPropsSize { 13 | /** The size of the icon */ 14 | size: Sizes[number]; 15 | } 16 | 17 | export interface IconPropsInline { 18 | /** Whether the Icon inherits text styles */ 19 | inline: true; 20 | } 21 | 22 | export interface IconPropsOverride { 23 | /** The width of the icon */ 24 | width: string; 25 | /** The height of the icon */ 26 | height: string; 27 | } 28 | 29 | export type IconProps = OneOf3< 30 | IconPropsSize, 31 | IconPropsInline, 32 | IconPropsOverride 33 | > & 34 | Element<"svg">; 35 | -------------------------------------------------------------------------------- /components/Icon/src/stories/Icon.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { select, color } from "@storybook/addon-knobs"; 3 | import { IconSizes } from ".."; 4 | import { names, mappings } from "../icons/mappings"; 5 | 6 | import notes from "../../README.md"; 7 | 8 | export default { 9 | title: "Components/Icon", 10 | parameters: { notes }, 11 | }; 12 | 13 | const sizes = Object.keys(IconSizes) as (keyof typeof IconSizes)[]; 14 | 15 | export const Playground = () => { 16 | const fill = color("Color", "rgba(0,0,0,.8)"); 17 | const size = select("Size", sizes, "x-large"); 18 | const Icon = mappings[select("Icon", names, "alert")]; 19 | return ; 20 | }; 21 | -------------------------------------------------------------------------------- /components/Icon/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Description, 4 | Title, 5 | Canvas, 6 | Story, 7 | } from "@storybook/addon-docs/blocks"; 8 | import { Version } from "@doc-blocks/version"; 9 | import { ShieldRow } from "@doc-blocks/shield-row"; 10 | 11 | import notes from "../../README.md"; 12 | import { version } from "../../package.json"; 13 | 14 | 15 | 16 | @devtools-ds/icon 17 | 18 | --- 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | ## Usage 32 | 33 | Icons are packaged as individual React components. 34 | 35 | ```jsx 36 | import { AlertIcon } from "@devtools-ds/icon"; 37 | 38 | // individual icon 39 | ; 40 | ``` 41 | 42 | Each `Icon` component is a single SVG that with a customizable size and color. 43 | 44 | 45 | 46 | 47 | 48 | ### Sizing 49 | 50 | There are three ways to size the icons: a size prop, inline, or with width and height. I've included an example of each below. 51 | 52 | ```jsx 53 | import { AlertIcon } from '@devtools-ds/icon'; 54 | 55 | // This will resize based on the four preset icon sizes used in the design system. 56 | 57 | // This will inherit the fontSize attribute in order to work inline with text. 58 | 59 | // This will resize using normal SVG resize controls 60 | 61 | ``` 62 | 63 | ### Inline 64 | 65 | The `inline` property makes the icon behave like an icon font, inheriting size and color from the text around it. 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /components/Icon/svg/alert.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /components/Icon/svg/chevron-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /components/Icon/svg/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /components/Icon/svg/chevron-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /components/Icon/svg/clipboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/console-error.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/console-result.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/console.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/Icon/svg/data.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/Icon/svg/debugger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/Icon/svg/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/export.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/history.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/inspector.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/Icon/svg/list.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/memory.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/Icon/svg/more-info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /components/Icon/svg/new-window.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/odometer.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/select.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/Icon/svg/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/svg/styles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/Icon/svg/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | -------------------------------------------------------------------------------- /components/Icon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/Navigation/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "adierkens", 15 | "name": "Adam Dierkens", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/13004162?v=4", 17 | "profile": "https://github.com/adierkens", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "design" 22 | ] 23 | }, 24 | { 25 | "login": "tylerkrupicka", 26 | "name": "Tyler Krupicka", 27 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 28 | "profile": "http://tylerkrupicka.com/", 29 | "contributions": [ 30 | "doc", 31 | "code", 32 | "example", 33 | "test" 34 | ] 35 | }, 36 | { 37 | "login": "hipstersmoothie", 38 | "name": "Andrew Lisowski", 39 | "avatar_url": "https://avatars.githubusercontent.com/u/1192452?v=4", 40 | "profile": "http://hipstersmoothie.com/", 41 | "contributions": [ 42 | "example", 43 | "code" 44 | ] 45 | } 46 | ], 47 | "contributorsPerLine": 7 48 | } 49 | -------------------------------------------------------------------------------- /components/Navigation/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Navigation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/navigation", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Adam Dierkens Adam_Dierkens@intuit.com", 9 | "contributors": [ 10 | "Adam Dierkens Adam_Dierkens@intuit.com", 11 | "Tyler Krupicka github@tylerkrupicka.com" 12 | ], 13 | "license": "MIT", 14 | "publishConfig": { 15 | "registry": "https://registry.npmjs.org/", 16 | "access": "public" 17 | }, 18 | "sideEffects": [ 19 | "*.css", 20 | "dist/esm/index.js" 21 | ], 22 | "scripts": { 23 | "clean": "ds clean", 24 | "build": "ds build", 25 | "dev": "ds dev", 26 | "storybook": "ds storybook start", 27 | "start": "ds build --watch", 28 | "test": "ds test", 29 | "lint": "ds lint", 30 | "size": "ds size" 31 | }, 32 | "dependencies": { 33 | "@babel/runtime": "7.7.2", 34 | "@design-systems/utils": "2.12.0", 35 | "@devtools-ds/themes": "link:../../packages/themes", 36 | "@reach/tabs": "0.12.1", 37 | "clsx": "1.1.0" 38 | }, 39 | "peerDependencies": { 40 | "react": ">= 16.8.6" 41 | }, 42 | "devDependencies": { 43 | "@devtools-ds/icon": "link:../Icon" 44 | }, 45 | "files": [ 46 | "dist", 47 | "src", 48 | "!*.snippet.*", 49 | "!*theme.*", 50 | "!*.test.*", 51 | "!__snapshots__", 52 | "!__tests__" 53 | ], 54 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 55 | } 56 | -------------------------------------------------------------------------------- /components/Navigation/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Description, 4 | Title, 5 | Canvas, 6 | Story, 7 | } from "@storybook/addon-docs/blocks"; 8 | import { Version } from "@doc-blocks/version"; 9 | import { ShieldRow } from "@doc-blocks/shield-row"; 10 | 11 | import notes from "../../README.md"; 12 | import { version } from "../../package.json"; 13 | 14 | 15 | 16 | @devtools-ds/navigation 17 | 18 | --- 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | ## Usage 32 | 33 | The `Navigation` component allows you to construct a navigation bar with tabs, buttons, and dividers that help users navigate your devtools application. 34 | In addition, the component manages showing and hiding different "panels" for you. 35 | This helps with accessibility, so we can automatically link the `id` of a tab to its corresponding panel. 36 | 37 | 38 | 39 | 40 | 41 | ### Icons 42 | 43 | Icons are optional for tabs; the component will work fine without them. 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /components/Navigation/src/theme.ts: -------------------------------------------------------------------------------- 1 | import { ComponentTheme } from "@devtools-ds/themes"; 2 | import { firefox, chrome } from "@devtools-ds/themes"; 3 | 4 | const NavTheme = (): ComponentTheme => ({ 5 | firefox: { 6 | light: { 7 | backgroundColor: firefox.light.gray01, 8 | textColor: firefox.light.gray06, 9 | selectedTextColor: firefox.light.blue04, 10 | selectedIconColor: firefox.light.blue04, 11 | selectedBarColor: firefox.light.blue04, 12 | hoverBarColor: firefox.light.gray03, 13 | hoverBackgroundColor: firefox.light.gray02, 14 | dividerColor: firefox.light.gray03, 15 | }, 16 | dark: { 17 | backgroundColor: firefox.dark.gray06, 18 | textColor: firefox.dark.textColor, 19 | selectedTextColor: "white", 20 | selectedIconColor: "white", 21 | selectedBarColor: firefox.dark.blue04, 22 | hoverBarColor: firefox.dark.gray02, 23 | hoverBackgroundColor: firefox.dark.gray04, 24 | dividerColor: firefox.dark.gray02, 25 | }, 26 | }, 27 | chrome: { 28 | light: { 29 | backgroundColor: chrome.light.gray01, 30 | textColor: chrome.light.textColor, 31 | selectedTextColor: chrome.light.textColor, 32 | selectedIconColor: chrome.light.textColor, 33 | selectedBarColor: chrome.light.blue03, 34 | hoverBarColor: chrome.light.gray02, 35 | hoverBackgroundColor: chrome.light.gray02, 36 | dividerColor: chrome.light.gray03, 37 | }, 38 | dark: { 39 | backgroundColor: chrome.dark.gray05, 40 | textColor: chrome.dark.textColor, 41 | selectedTextColor: chrome.dark.textColor, 42 | selectedIconColor: chrome.dark.textColor, 43 | selectedBarColor: chrome.dark.blue03, 44 | hoverBarColor: chrome.dark.gray06, 45 | hoverBackgroundColor: chrome.dark.gray06, 46 | dividerColor: chrome.dark.gray04, 47 | }, 48 | }, 49 | }); 50 | 51 | export default NavTheme; 52 | -------------------------------------------------------------------------------- /components/Navigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/Node/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "tylerkrupicka", 15 | "name": "Tyler Krupicka", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 17 | "profile": "http://tylerkrupicka.com/", 18 | "contributions": [ 19 | "doc", 20 | "code", 21 | "design", 22 | "example", 23 | "test" 24 | ] 25 | } 26 | ], 27 | "contributorsPerLine": 7 28 | } 29 | -------------------------------------------------------------------------------- /components/Node/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.2 (Mon Feb 15 2021) 2 | 3 | #### 🐛 Bug Fix 4 | 5 | - fix my clone in contributors ([@tylerkrupicka](https://github.com/tylerkrupicka)) 6 | 7 | #### 📝 Documentation 8 | 9 | - Fix Component All Contributors [#10](https://github.com/intuit/devtools-ds/pull/10) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 10 | 11 | #### Authors: 1 12 | 13 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 14 | 15 | --- 16 | 17 | # v0.131.0 (Tue Jan 26 2021) 18 | 19 | #### 🚀 Enhancement 20 | 21 | - Navigation Accessibility [#4](https://github.com/intuit/devtools-ds/pull/4) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 22 | 23 | #### 🐛 Bug Fix 24 | 25 | - fix node package json ([@tylerkrupicka](https://github.com/tylerkrupicka)) 26 | - fix yarn links ([@tylerkrupicka](https://github.com/tylerkrupicka)) 27 | 28 | #### Authors: 1 29 | 30 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 31 | 32 | --- 33 | 34 | # v0.130.5 (Sun Jan 24 2021) 35 | 36 | #### ⚠️ Pushed to `master` 37 | 38 | - Merge branch 'master' of https://github.com/intuit/devtools-ds ([@tylerkrupicka](https://github.com/tylerkrupicka)) 39 | 40 | #### Authors: 1 41 | 42 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 43 | 44 | --- 45 | 46 | # v0.130.4 (Sun Jan 24 2021) 47 | 48 | #### ⚠️ Pushed to `master` 49 | 50 | - Merge branch 'master' of https://github.com/intuit/devtools-ds ([@tylerkrupicka](https://github.com/tylerkrupicka)) 51 | 52 | #### Authors: 1 53 | 54 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 55 | 56 | --- 57 | 58 | # vnull (Sun Jan 24 2021) 59 | 60 | #### 🐛 Bug Fix 61 | 62 | - Bump version to: v0.130.1 \[skip ci\] (https://github.com/tylerkrupicka) 63 | 64 | #### ⚠️ Pushed to `master` 65 | 66 | - set access in package json (https://github.com/tylerkrupicka) 67 | 68 | #### Authors: 1 69 | 70 | - Tyler Krupicka (https://github.com/tylerkrupicka) 71 | -------------------------------------------------------------------------------- /components/Node/README.md: -------------------------------------------------------------------------------- 1 | # @devtools-ds/node 2 | 3 | A component for rendering DOM Node style opening and closing HTML tags. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @devtools-ds/node 9 | # or with yarn 10 | yarn add @devtools-ds/node 11 | ``` 12 | 13 | Then to use the component in your code just import it! 14 | 15 | ```js 16 | import { Node } from "@devtools-ds/node"; 17 | ``` 18 | 19 | ## Usage 20 | 21 | The label can be a string or a React component. 22 | 23 | ```jsx 24 | 25 | const properties = { 26 | class: 'test', 27 | style: 'font-weight: bold;' 28 | }; 29 | 30 | 31 | Content 32 | 33 | 34 | ``` 35 | 36 | ## Contributors ✨ 37 | 38 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |

Tyler Krupicka
📖 💻 🎨 💡 ⚠️
48 | 49 | 50 | 51 | 52 | 53 | 54 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 55 | -------------------------------------------------------------------------------- /components/Node/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@design-systems/test/jest.config.base'); 2 | const { name } = require('./package.json'); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name 8 | }; 9 | -------------------------------------------------------------------------------- /components/Node/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/node", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": [ 18 | "*.css", 19 | "dist/esm/index.js" 20 | ], 21 | "scripts": { 22 | "clean": "ds clean", 23 | "build": "ds build", 24 | "dev": "ds dev", 25 | "storybook": "ds storybook start", 26 | "start": "ds build --watch", 27 | "test": "ds test", 28 | "lint": "ds lint", 29 | "size": "ds size" 30 | }, 31 | "dependencies": { 32 | "@babel/runtime": "7.7.2", 33 | "@devtools-ds/themes": "link:../../packages/themes", 34 | "clsx": "1.1.0" 35 | }, 36 | "peerDependencies": { 37 | "react": ">= 16.8.6" 38 | }, 39 | "files": [ 40 | "dist", 41 | "src", 42 | "!*.snippet.*", 43 | "!*theme.*", 44 | "!*.test.*", 45 | "!__snapshots__", 46 | "!__tests__" 47 | ], 48 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 49 | } 50 | -------------------------------------------------------------------------------- /components/Node/src/Node.css: -------------------------------------------------------------------------------- 1 | .node { 2 | font-family: Menlo, monospace; 3 | color: @theme textColor; 4 | } 5 | 6 | .tag { 7 | color: @theme tagColor; 8 | } 9 | 10 | .name { 11 | color: @theme nameColor; 12 | } 13 | 14 | .key { 15 | color: @theme keyColor; 16 | } 17 | 18 | .value { 19 | color: @theme valueColor; 20 | } 21 | 22 | .comment { 23 | * { 24 | color: @theme commentColor; 25 | } 26 | } 27 | 28 | .docType { 29 | * { 30 | color: @theme docTypeColor; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /components/Node/src/Node.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "@testing-library/react"; 3 | import { Node } from "."; 4 | 5 | const properties = { 6 | class: "test", 7 | style: "font-weight: bold;", 8 | }; 9 | 10 | describe("Node", () => { 11 | test("It displays the full text", () => { 12 | const { container } = render( 13 | <> 14 | 15 | 16 | 17 | ); 18 | expect(container.textContent).toStrictEqual( 19 | '' 20 | ); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /components/Node/src/stories/Features.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Node } from ".."; 4 | import notes from "../../README.md"; 5 | 6 | export default { 7 | title: "Components/Node/Features", 8 | parameters: { notes }, 9 | }; 10 | 11 | const properties = { 12 | class: "test", 13 | style: "font-weight: bold;", 14 | }; 15 | 16 | const longer = { 17 | class: "test multiple classes", 18 | style: "touch-action: none; left: 210px; width: 1704px; margin-top: -10px;", 19 | scrolling: "yes", 20 | role: "button", 21 | }; 22 | 23 | export const BasicUsage = () => ( 24 | <> 25 | 26 | 27 | 28 | ); 29 | 30 | export const SelfClosing = () => ( 31 | 32 | ); 33 | 34 | export const Wrapping = () => ( 35 | <> 36 | 37 | 38 | 39 | ); 40 | 41 | export const Comment = () => ; 42 | export const Doctype = () => ; 43 | -------------------------------------------------------------------------------- /components/Node/src/stories/Node.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { text, boolean } from "@storybook/addon-knobs"; 3 | 4 | import { Node } from ".."; 5 | import notes from "../../README.md"; 6 | 7 | export default { 8 | title: "Components/Node", 9 | parameters: { notes }, 10 | }; 11 | 12 | export const Playground = () => { 13 | const name = text("Tag Name", "div"); 14 | const isSelfClosing = boolean("Self Closing", false); 15 | const isClosingTag = boolean("Closing", false); 16 | const key = text("Property Key", "class"); 17 | const value = text("Property Value", "nodeClass"); 18 | 19 | const property = { 20 | [key]: value, 21 | }; 22 | 23 | return ( 24 | 30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /components/Node/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Description, 4 | Title, 5 | Canvas, 6 | Story, 7 | } from "@storybook/addon-docs/blocks"; 8 | import { Version } from "@doc-blocks/version"; 9 | import { ShieldRow } from "@doc-blocks/shield-row"; 10 | 11 | import notes from "../../README.md"; 12 | import { version } from "../../package.json"; 13 | 14 | 15 | 16 | @devtools-ds/node 17 | 18 | --- 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | ## Usage 32 | 33 | The `Node` component is primarily used to create opening and closing HTML tags following browser color schemes. 34 | 35 | 36 | 37 | 38 | 39 | ### Self Closing 40 | 41 | You can also create self-closing HTML tags. 42 | 43 | 44 | 45 | 46 | 47 | ### Alternate Tag Styles 48 | 49 | In addition to common HTML tag styles, this package has support for the `comment` and `doctype` nodes commmonly found in a DOM inspector. 50 | 51 | #### Comment 52 | 53 | 54 | 55 | 56 | 57 | #### DocType 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /components/Node/src/theme.ts: -------------------------------------------------------------------------------- 1 | import { ComponentTheme, chrome, firefox } from "@devtools-ds/themes"; 2 | 3 | const NodeTheme = (): ComponentTheme => ({ 4 | firefox: { 5 | light: { 6 | textColor: firefox.light.textColor, 7 | tagColor: firefox.light.textColor, 8 | nameColor: firefox.light.blue03, 9 | keyColor: firefox.light.pink01, 10 | valueColor: firefox.light.blue05, 11 | commentColor: firefox.light.green01, 12 | docTypeColor: firefox.light.textColor, 13 | }, 14 | dark: { 15 | textColor: firefox.dark.textColor, 16 | tagColor: firefox.dark.textColor, 17 | nameColor: firefox.dark.blue01, 18 | keyColor: firefox.dark.pink01, 19 | valueColor: firefox.dark.purple01, 20 | commentColor: firefox.dark.green01, 21 | docTypeColor: firefox.dark.textColor, 22 | }, 23 | }, 24 | chrome: { 25 | light: { 26 | textColor: chrome.light.textColor, 27 | tagColor: chrome.light.purple01, 28 | nameColor: chrome.light.purple03, 29 | keyColor: chrome.light.brown01, 30 | valueColor: chrome.light.blue04, 31 | commentColor: chrome.light.green01, 32 | docTypeColor: chrome.light.gray04, 33 | }, 34 | dark: { 35 | textColor: chrome.dark.textColor, 36 | tagColor: chrome.dark.blue02, 37 | nameColor: chrome.dark.blue02, 38 | keyColor: chrome.dark.blue01, 39 | valueColor: chrome.dark.orange01, 40 | commentColor: chrome.dark.gray03, 41 | docTypeColor: chrome.dark.gray02, 42 | }, 43 | }, 44 | }); 45 | 46 | export default NodeTheme; 47 | -------------------------------------------------------------------------------- /components/Node/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/ObjectInspector/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "tylerkrupicka", 15 | "name": "Tyler Krupicka", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 17 | "profile": "http://tylerkrupicka.com/", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "design", 22 | "infra", 23 | "example", 24 | "test" 25 | ] 26 | }, 27 | { 28 | "login": "adierkens", 29 | "name": "Adam Dierkens", 30 | "avatar_url": "https://avatars.githubusercontent.com/u/13004162?v=4", 31 | "profile": "https://github.com/adierkens", 32 | "contributions": [ 33 | "code", 34 | "doc", 35 | "example", 36 | "test" 37 | ] 38 | } 39 | ], 40 | "contributorsPerLine": 7 41 | } 42 | -------------------------------------------------------------------------------- /components/ObjectInspector/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@design-systems/test/jest.config.base'); 2 | const { name } = require('./package.json'); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name 8 | }; 9 | -------------------------------------------------------------------------------- /components/ObjectInspector/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/object-inspector", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": [ 18 | "*.css", 19 | "dist/esm/index.js" 20 | ], 21 | "scripts": { 22 | "clean": "ds clean", 23 | "build": "ds build", 24 | "dev": "ds dev", 25 | "storybook": "ds storybook start", 26 | "start": "ds build --watch", 27 | "test": "ds test", 28 | "lint": "ds lint", 29 | "size": "ds size" 30 | }, 31 | "dependencies": { 32 | "@babel/runtime": "7.7.2", 33 | "@devtools-ds/object-parser": "link:../../packages/object-parser", 34 | "@devtools-ds/themes": "link:../../packages/themes", 35 | "@devtools-ds/tree": "link:../Tree", 36 | "clsx": "1.1.0" 37 | }, 38 | "peerDependencies": { 39 | "react": ">= 16.8.6" 40 | }, 41 | "files": [ 42 | "dist", 43 | "src", 44 | "!*.snippet.*", 45 | "!*theme.*", 46 | "!*.test.*", 47 | "!__snapshots__", 48 | "!__tests__" 49 | ], 50 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 51 | } 52 | -------------------------------------------------------------------------------- /components/ObjectInspector/src/ObjectInspector.css: -------------------------------------------------------------------------------- 1 | .object-inspector { 2 | width: 100%; 3 | font-family: Menlo, monospace; 4 | color: @theme textColor; 5 | } 6 | 7 | .object-label { 8 | color: @theme labelColor; 9 | } 10 | 11 | .text { 12 | color: @theme textColor; 13 | } 14 | 15 | .key { 16 | color: @theme keyColor; 17 | } 18 | 19 | .value { 20 | color: @theme valueColor; 21 | } 22 | 23 | .string { 24 | color: @theme stringColor; 25 | } 26 | 27 | .regex { 28 | color: @theme regexColor; 29 | } 30 | 31 | .error { 32 | color: @theme errorColor; 33 | } 34 | 35 | .boolean { 36 | color: @theme booleanColor; 37 | } 38 | 39 | .number { 40 | color: @theme numberColor; 41 | } 42 | 43 | .undefined { 44 | color: @theme undefinedColor; 45 | } 46 | 47 | .null { 48 | color: @theme nullColor; 49 | } 50 | 51 | .function { 52 | color: @theme functionColor; 53 | } 54 | 55 | .function-decorator { 56 | color: @theme functionDecoratorColor; 57 | } 58 | 59 | .prototype { 60 | color: @theme prototypeColor; 61 | } 62 | -------------------------------------------------------------------------------- /components/ObjectInspector/src/index.ts: -------------------------------------------------------------------------------- 1 | export { ObjectInspector } from "./ObjectInspector"; 2 | -------------------------------------------------------------------------------- /components/ObjectInspector/src/stories/Examples.stories.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import { ObjectInspector } from "../ObjectInspector"; 4 | import notes from "../../README.md"; 5 | 6 | export default { 7 | title: "Components/Object Inspector/Examples", 8 | parameters: { notes }, 9 | }; 10 | 11 | export const ClickEvent = () => { 12 | const [click, setClick] = useState({}); 13 | 14 | return ( 15 | <> 16 | 25 | {Object.keys(click).length !== 0 && ( 26 | 27 | )} 28 | 29 | ); 30 | }; 31 | 32 | export const KeyDownEvent = () => { 33 | const [keyDown, setKeyDown] = useState({}); 34 | 35 | return ( 36 | <> 37 | { 42 | event.persist(); 43 | setKeyDown(event); 44 | }} 45 | /> 46 | {Object.keys(keyDown).length !== 0 && ( 47 | 48 | )} 49 | 50 | ); 51 | }; 52 | -------------------------------------------------------------------------------- /components/ObjectInspector/src/stories/Features.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { action } from "@storybook/addon-actions"; 3 | import { ObjectInspector } from "../ObjectInspector"; 4 | import notes from "../../README.md"; 5 | 6 | export default { 7 | title: "Components/Object Inspector/Features", 8 | parameters: { notes }, 9 | }; 10 | 11 | const testFunction = () => { 12 | setTimeout(() => {}, 2000); 13 | }; 14 | 15 | const promise = new Promise((resolve) => { 16 | resolve(42); 17 | }); 18 | 19 | const map = new Map(); 20 | map.set("foo", "bar"); 21 | 22 | const set = new Set(); 23 | set.add("test"); 24 | 25 | const data = { 26 | string: "string", 27 | boolean: true, 28 | number: 100, 29 | promise, 30 | null: null, 31 | map, 32 | set, 33 | function: testFunction, 34 | error: new Error("You broke it"), 35 | date: new Date(), 36 | symbol: Symbol("foo"), 37 | regex: /[A-Z]/g, 38 | "test-undefined": undefined, 39 | array: [ 40 | "fun", 41 | { 42 | object: { 43 | nesting: true, 44 | }, 45 | }, 46 | "three", 47 | "four", 48 | "five", 49 | "six", 50 | "seven", 51 | "eight", 52 | 9, 53 | 10, 54 | ], 55 | object: { 56 | working: "properly", 57 | function: testFunction, 58 | }, 59 | }; 60 | 61 | export const BasicUsage = () => ; 62 | 63 | export const DefaultOpen = () => ( 64 | 65 | ); 66 | 67 | export const DisableSorting = () => ( 68 | 69 | ); 70 | 71 | export const DisablePrototypes = () => ( 72 | 73 | ); 74 | 75 | export const FontInheritance = () => ( 76 |
77 | 78 |
79 | ); 80 | 81 | export const OnSelectCallback = () => { 82 | const onSelectAction = action("onSelect"); 83 | 84 | return ; 85 | }; 86 | -------------------------------------------------------------------------------- /components/ObjectInspector/src/stories/ObjectInspector.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { boolean, number } from "@storybook/addon-knobs"; 3 | import { action } from "@storybook/addon-actions"; 4 | import { ObjectInspector } from "../ObjectInspector"; 5 | import notes from "../../README.md"; 6 | 7 | export default { 8 | title: "Components/Object Inspector", 9 | parameters: { notes }, 10 | }; 11 | 12 | const testFunction = () => { 13 | setTimeout(() => {}, 2000); 14 | }; 15 | 16 | const promise = new Promise((resolve) => { 17 | resolve(42); 18 | }); 19 | 20 | const map = new Map(); 21 | map.set("foo", "bar"); 22 | 23 | const set = new Set(); 24 | set.add("test"); 25 | 26 | const data = { 27 | string: "string", 28 | boolean: true, 29 | number: 100, 30 | promise, 31 | null: null, 32 | map, 33 | set, 34 | function: testFunction, 35 | error: new Error("You broke it"), 36 | date: new Date(), 37 | symbol: Symbol("foo"), 38 | regex: /[A-Z]/g, 39 | "test-undefined": undefined, 40 | array: [ 41 | "fun", 42 | { 43 | object: { 44 | nesting: true, 45 | }, 46 | }, 47 | "three", 48 | "four", 49 | "five", 50 | "six", 51 | "seven", 52 | "eight", 53 | 9, 54 | 10, 55 | ], 56 | object: { 57 | working: "properly", 58 | function: testFunction, 59 | }, 60 | }; 61 | 62 | export const Playground = () => { 63 | const onSelect = action("onSelect"); 64 | return ( 65 | 72 | ); 73 | }; 74 | -------------------------------------------------------------------------------- /components/ObjectInspector/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Description, 4 | Title, 5 | Canvas, 6 | Story, 7 | } from "@storybook/addon-docs/blocks"; 8 | import { Version } from "@doc-blocks/version"; 9 | import { ShieldRow } from "@doc-blocks/shield-row"; 10 | 11 | import notes from "../../README.md"; 12 | import { version } from "../../package.json"; 13 | 14 | 15 | 16 | @devtools-ds/object-inspector 17 | 18 | --- 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | ## Usage 32 | 33 | The `ObjectInspector` component displays JavaScript objects in an expandable tree view. 34 | 35 | 36 | 37 | 38 | 39 | ### Default Open 40 | 41 | You can use the `expandLevel` prop to open the inspector to a specific level by default. 42 | 43 | 44 | 45 | 46 | 47 | ### Sorting Keys 48 | 49 | By default, the inspector mirrors the browser behavior and sorts keys. You can disable this with the sortKeys prop. 50 | 51 | 52 | 53 | 54 | 55 | ### Removing Prototypes 56 | 57 | Similarly, you can disable object `prototypes` from being included. 58 | 59 | 60 | 61 | 62 | 63 | ### onSelect 64 | 65 | You can use the `onSelect` prop to get the `@devtools-ds/object-parser` AST node for the currently selected part of the object. 66 | This includes the `parent` of the node so everything should be traversable. 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /components/ObjectInspector/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/Table/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "tylerkrupicka", 15 | "name": "Tyler Krupicka", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 17 | "profile": "http://tylerkrupicka.com/", 18 | "contributions": [ 19 | "doc", 20 | "design", 21 | "code", 22 | "example", 23 | "test" 24 | ] 25 | }, 26 | { 27 | "login": "hipstersmoothie", 28 | "name": "Andrew Lisowski", 29 | "avatar_url": "https://avatars.githubusercontent.com/u/1192452?v=4", 30 | "profile": "http://hipstersmoothie.com/", 31 | "contributions": [ 32 | "code" 33 | ] 34 | }, 35 | { 36 | "login": "mormubis", 37 | "name": "Adrian de la Rosa", 38 | "avatar_url": "https://avatars.githubusercontent.com/u/1523379?v=4", 39 | "profile": "http://adrian.delarosab.me/", 40 | "contributions": [ 41 | "doc", 42 | "example", 43 | "code" 44 | ] 45 | } 46 | ], 47 | "contributorsPerLine": 7 48 | } 49 | -------------------------------------------------------------------------------- /components/Table/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/table", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": [ 18 | "*.css", 19 | "dist/esm/index.js" 20 | ], 21 | "scripts": { 22 | "clean": "ds clean", 23 | "build": "ds build", 24 | "dev": "ds dev", 25 | "storybook": "ds storybook start", 26 | "start": "ds build --watch", 27 | "test": "ds test", 28 | "lint": "ds lint", 29 | "size": "ds size" 30 | }, 31 | "dependencies": { 32 | "@babel/runtime": "7.7.2", 33 | "@design-systems/utils": "2.12.0", 34 | "@devtools-ds/themes": "link:../../packages/themes", 35 | "clsx": "1.1.0", 36 | "use-resize-observer": "6.1.0" 37 | }, 38 | "devDependencies": { 39 | "@types/color": "3.0.1", 40 | "color": "3.1.3" 41 | }, 42 | "peerDependencies": { 43 | "react": ">= 16.8.6" 44 | }, 45 | "files": [ 46 | "dist", 47 | "src", 48 | "!*.snippet.*", 49 | "!*theme.*", 50 | "!*.test.*", 51 | "!__snapshots__", 52 | "!__tests__" 53 | ], 54 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 55 | } 56 | -------------------------------------------------------------------------------- /components/Table/src/Table.css: -------------------------------------------------------------------------------- 1 | .table { 2 | width: 100%; 3 | table-layout: fixed; 4 | font-family: sans-serif; 5 | color: @theme textColor; 6 | 7 | &:last-child { 8 | border-bottom: 1px solid @theme borderColor; 9 | } 10 | } 11 | 12 | .table-head { 13 | background-color: @theme headBackgroundColor; 14 | text-align: left; 15 | position: sticky; 16 | top: 0; 17 | box-shadow: inset 0 1px 0 0 @theme borderColor, 18 | inset 0 -1px 0 0 @theme borderColor, inset -1px 0 0 0 @theme borderColor, 19 | inset 1px 0 0 0 @theme borderColor; 20 | } 21 | 22 | .cell-head { 23 | padding: 5px; 24 | position: relative; 25 | border-right: 1px solid @theme borderColor; 26 | font-weight: 400; 27 | min-width: 40px; 28 | 29 | .content { 30 | overflow: hidden; 31 | text-overflow: ellipsis; 32 | } 33 | 34 | .resize { 35 | position: absolute; 36 | top: 0; 37 | right: -4px; 38 | width: 7px; 39 | cursor: col-resize; 40 | user-select: none; 41 | 42 | &.active { 43 | cursor: inherit; 44 | } 45 | } 46 | 47 | &:last-of-type { 48 | .resize { 49 | display: none; 50 | } 51 | } 52 | } 53 | 54 | .cell { 55 | padding: 5px; 56 | border-right: 1px solid @theme borderColor; 57 | overflow: hidden; 58 | white-space: nowrap; 59 | text-overflow: ellipsis; 60 | 61 | &:first-child { 62 | border-left: 1px solid @theme borderColor; 63 | } 64 | } 65 | 66 | .row { 67 | outline: none; 68 | 69 | &:nth-child(even) { 70 | background-color: @theme stripeColor; 71 | } 72 | 73 | &.interactive { 74 | &:hover { 75 | background-color: @theme rowHoverColor; 76 | } 77 | 78 | &:focus { 79 | background-color: @theme rowHoverColor; 80 | } 81 | 82 | &[aria-selected="true"] { 83 | background-color: @theme rowSelectedColor; 84 | color: white; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /components/Table/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Description, 4 | Title, 5 | Canvas, 6 | Story, 7 | } from "@storybook/addon-docs/blocks"; 8 | import { Version } from "@doc-blocks/version"; 9 | import { ShieldRow } from "@doc-blocks/shield-row"; 10 | 11 | import notes from "../../README.md"; 12 | import { version } from "../../package.json"; 13 | 14 | 15 | 16 | @devtools-ds/table 17 | 18 | --- 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | ## Usage 32 | 33 | The `Table` component is an HTML Table styled after the network inspector in Chrome and Firefox. 34 | 35 | 36 | 37 | 38 | 39 | ### Selecting Rows 40 | 41 | You can use the `selected` and `onSelected` props to track which row is selected. 42 | Adding these props will enable hover and focus styles. 43 | 44 | 45 | 46 | 47 | 48 | ### Resizing 49 | 50 | Each column is user-resizable, and the `Table` will automatically fill the space of its container as needed. 51 | 52 | 53 | 54 | 55 | 56 | ### Overflow 57 | 58 | Table head will automatically stick to the top when contents overflow. 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /components/Table/src/stories/Table.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { select } from "@storybook/addon-knobs"; 3 | import { action } from "@storybook/addon-actions"; 4 | 5 | import { Table } from ".."; 6 | import notes from "../../README.md"; 7 | 8 | export default { 9 | title: "Components/Table", 10 | parameters: { notes }, 11 | }; 12 | 13 | export const Playground = () => { 14 | const onSelected = action("onSelected"); 15 | const selected = select( 16 | "Selected Row", 17 | ["one", "two", "three", "four"], 18 | undefined 19 | ); 20 | 21 | return ( 22 | 23 | 24 | 25 | Status 26 | Method 27 | Domain 28 | Transferred 29 | 30 | 31 | 32 | 33 | 200 34 | GET 35 | localhost:6006 36 | 4.6 KB 37 | 38 | 39 | 200 40 | POST 41 | localhost:6006 42 | 22 KB 43 | 44 | 45 | 404 46 | GET 47 | localhost:6006 48 | 0.1 KB 49 | 50 | 51 | 301 52 | GET 53 | localhost:6006 54 | 0.2 KB 55 | 56 | 57 |
58 | ); 59 | }; 60 | -------------------------------------------------------------------------------- /components/Table/src/theme.ts: -------------------------------------------------------------------------------- 1 | import { ComponentTheme, firefox, chrome } from "@devtools-ds/themes"; 2 | import color from "color"; 3 | 4 | const TableTheme = (): ComponentTheme => ({ 5 | firefox: { 6 | light: { 7 | textColor: firefox.light.textColor, 8 | stripeColor: firefox.light.gray01, 9 | borderColor: firefox.light.gray02, 10 | headBackgroundColor: firefox.light.gray01, 11 | rowHoverColor: firefox.light.blue02, 12 | rowSelectedColor: firefox.light.blue03, 13 | }, 14 | dark: { 15 | textColor: firefox.dark.textColor, 16 | stripeColor: firefox.dark.gray03, 17 | borderColor: firefox.dark.gray02, 18 | headBackgroundColor: firefox.dark.gray05, 19 | rowHoverColor: color(firefox.dark.gray03) 20 | .mix(color(firefox.dark.blue05), 0.1) 21 | .string(), 22 | rowSelectedColor: firefox.dark.blue05, 23 | }, 24 | }, 25 | chrome: { 26 | light: { 27 | textColor: chrome.light.textColor, 28 | stripeColor: chrome.light.gray01, 29 | borderColor: chrome.light.gray03, 30 | headBackgroundColor: chrome.light.gray01, 31 | rowHoverColor: chrome.light.blue01, 32 | rowSelectedColor: chrome.light.blue03, 33 | }, 34 | dark: { 35 | textColor: chrome.dark.textColor, 36 | stripeColor: chrome.dark.gray05, 37 | borderColor: chrome.dark.gray04, 38 | headBackgroundColor: color(chrome.dark.gray05) 39 | .mix(color(chrome.dark.blue05), 0.1) 40 | .string(), 41 | rowHoverColor: chrome.dark.blue05, 42 | rowSelectedColor: chrome.dark.blue03, 43 | }, 44 | }, 45 | }); 46 | 47 | export default TableTheme; 48 | -------------------------------------------------------------------------------- /components/Table/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/Tree/.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "devtools-ds", 3 | "projectOwner": "design-systems", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "commitConvention": "eslint", 12 | "contributors": [ 13 | { 14 | "login": "tylerkrupicka", 15 | "name": "Tyler Krupicka", 16 | "avatar_url": "https://avatars.githubusercontent.com/u/5761061?v=4", 17 | "profile": "http://tylerkrupicka.com/", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "design", 22 | "infra", 23 | "example", 24 | "test" 25 | ] 26 | }, 27 | { 28 | "login": "adierkens", 29 | "name": "Adam Dierkens", 30 | "avatar_url": "https://avatars.githubusercontent.com/u/13004162?v=4", 31 | "profile": "https://github.com/adierkens", 32 | "contributions": [ 33 | "doc", 34 | "example", 35 | "test", 36 | "code" 37 | ] 38 | }, 39 | { 40 | "login": "hipstersmoothie", 41 | "name": "Andrew Lisowski", 42 | "avatar_url": "https://avatars.githubusercontent.com/u/1192452?v=4", 43 | "profile": "http://hipstersmoothie.com/", 44 | "contributions": [ 45 | "doc", 46 | "example", 47 | "code" 48 | ] 49 | } 50 | ], 51 | "contributorsPerLine": 7 52 | } 53 | -------------------------------------------------------------------------------- /components/Tree/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@design-systems/test/jest.config.base'); 2 | const { name } = require('./package.json'); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name 8 | }; 9 | -------------------------------------------------------------------------------- /components/Tree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/tree", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": [ 18 | "*.css", 19 | "dist/esm/index.js" 20 | ], 21 | "scripts": { 22 | "clean": "ds clean", 23 | "build": "ds build", 24 | "dev": "ds dev", 25 | "storybook": "ds storybook start", 26 | "start": "ds build --watch", 27 | "test": "ds test", 28 | "lint": "ds lint", 29 | "size": "ds size" 30 | }, 31 | "dependencies": { 32 | "@babel/runtime": "7.7.2", 33 | "@devtools-ds/themes": "link:../../packages/themes", 34 | "clsx": "1.1.0" 35 | }, 36 | "peerDependencies": { 37 | "react": ">= 16.8.6" 38 | }, 39 | "files": [ 40 | "dist", 41 | "src", 42 | "!*.snippet.*", 43 | "!*theme.*", 44 | "!*.test.*", 45 | "!__snapshots__", 46 | "!__tests__" 47 | ], 48 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 49 | } 50 | -------------------------------------------------------------------------------- /components/Tree/src/Tree.css: -------------------------------------------------------------------------------- 1 | .tree { 2 | width: 100%; 3 | font-family: Menlo, monospace; 4 | } 5 | 6 | /* Indent each row in the tree */ 7 | .item { 8 | list-style: outside none none; 9 | } 10 | 11 | /* Remove padding from the unordered list */ 12 | .group { 13 | margin: 0; 14 | padding: 0; 15 | list-style: outside none none; 16 | 17 | /* Responsible for the highlight and focus colors in the row */ 18 | .label { 19 | cursor: default; 20 | line-height: 1.5; 21 | width: 100%; 22 | display: inline-block; 23 | outline: none; 24 | padding-left: 5px; 25 | 26 | &:focus { 27 | background-color: @theme focusColor; 28 | color: @theme focusTextColor; 29 | 30 | &.focusWhite { 31 | * { 32 | color: white; 33 | } 34 | 35 | .arrow { 36 | border-color: transparent transparent transparent white; 37 | } 38 | } 39 | } 40 | } 41 | 42 | .label.hover { 43 | &:hover:not(:focus) { 44 | background-color: @theme hoverColor; 45 | border-radius: @theme hoverRadius; 46 | } 47 | } 48 | } 49 | 50 | /* The expand/collapse arrow character */ 51 | .arrow { 52 | margin: 0 0.7em 0 0.1em; 53 | display: inline-block; 54 | width: 0; 55 | height: 0; 56 | border-style: solid; 57 | border-width: 0.4em 0 0.4em 0.4em; 58 | border-color: transparent transparent transparent @theme arrowColor; 59 | vertical-align: baseline; 60 | 61 | &.open { 62 | transform: rotateZ(90deg); 63 | bottom: -0.05em; 64 | } 65 | 66 | @media screen and (prefers-reduced-motion: reduce) { 67 | transition: none; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /components/Tree/src/TreeContext.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface TreeContext { 4 | /** Whether the current tree is a child of another */ 5 | isChild: boolean; 6 | /** Depth of current node */ 7 | depth: number; 8 | /** Whether to have hover styles */ 9 | hasHover: boolean; 10 | } 11 | 12 | const TreeContext = React.createContext({ 13 | isChild: false, 14 | depth: 0, 15 | hasHover: true 16 | }); 17 | 18 | export default TreeContext; 19 | -------------------------------------------------------------------------------- /components/Tree/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Description, 4 | Title, 5 | Canvas, 6 | Story, 7 | } from "@storybook/addon-docs/blocks"; 8 | import { Version } from "@doc-blocks/version"; 9 | import { ShieldRow } from "@doc-blocks/shield-row"; 10 | 11 | import notes from "../../README.md"; 12 | import { version } from "../../package.json"; 13 | 14 | 15 | 16 | @devtools-ds/tree 17 | 18 | --- 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | ## Usage 32 | 33 | The `Tree` component is a keyboard accessible tree view. 34 | 35 | 36 | 37 | 38 | 39 | ### Disable Hover 40 | 41 | In some uses, like `ObjectInspector`, the tree does not have a hover style. You can disable these by setting the `hover` prop to false. 42 | 43 | 44 | 45 | 46 | 47 | ### Default Open 48 | 49 | You can also specify whether a certain tree node starts open when rendered. 50 | 51 | 52 | 53 | 54 | 55 | ### Events 56 | 57 | There are some event callbacks you can use when building a component around the `Tree`. 58 | 59 | #### onUpdate 60 | 61 | The `onUpdate` event lets you track the current open/closed state of the `Tree` node. 62 | We use this to change labels in the `ObjectInspector` component. 63 | 64 | 65 | 66 | 67 | 68 | #### onSelect 69 | 70 | The `onSelect` event lets you attach a callback when a tree node is currently selected using the mouse or keyboard. 71 | We also use this event in `ObjectInspector` to track which part of the object is currently selected. 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /components/Tree/src/stories/Tree.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { text, boolean } from "@storybook/addon-knobs"; 3 | import { action } from "@storybook/addon-actions"; 4 | 5 | import { Tree } from ".."; 6 | import notes from "../../README.md"; 7 | 8 | export default { 9 | title: "Components/Tree", 10 | parameters: { notes }, 11 | }; 12 | 13 | export const Playground = () => { 14 | const onSelect = action("onSelect"); 15 | const onUpdate = action("onUpdate"); 16 | const hover = boolean("Hover", false); 17 | const first = text("Root Label", "First Level"); 18 | 19 | return ( 20 | 21 | 22 | 23 | 24 | 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /components/Tree/src/theme.ts: -------------------------------------------------------------------------------- 1 | import { ComponentTheme, firefox, chrome } from "@devtools-ds/themes"; 2 | 3 | const TreeTheme = (): ComponentTheme => ({ 4 | firefox: { 5 | light: { 6 | focusColor: firefox.light.blue03, 7 | hoverColor: firefox.light.blue01, 8 | arrowColor: firefox.light.gray03, 9 | hoverRadius: "0px", 10 | }, 11 | dark: { 12 | focusColor: firefox.dark.blue05, 13 | hoverColor: firefox.dark.gray04, 14 | arrowColor: firefox.dark.gray01, 15 | }, 16 | }, 17 | chrome: { 18 | light: { 19 | focusColor: chrome.light.blue02, 20 | hoverColor: chrome.light.blue01, 21 | arrowColor: chrome.light.gray05, 22 | hoverRadius: "6px", 23 | }, 24 | dark: { 25 | focusColor: chrome.dark.blue04, 26 | hoverColor: chrome.dark.blue05, 27 | arrowColor: chrome.dark.gray02, 28 | }, 29 | }, 30 | }); 31 | 32 | export default TreeTheme; 33 | -------------------------------------------------------------------------------- /components/Tree/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | 10 | // Need to override emotion's types because they pollute the global 11 | "baseUrl": ".", 12 | "paths": { 13 | "@emotion/core": ["../../typings/emotion.d.ts"] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /ds.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "noVersionWarning": true, 3 | "build": { 4 | "cssImport": true, 5 | "cssMain": "main" 6 | }, 7 | "create": { 8 | "component": { 9 | "templates": [ 10 | { 11 | "name": "ts", 12 | "url": "https://github.com/tylerkrupicka/component-template", 13 | "description": "tylerkrupicka component template", 14 | "sha": "7c30ca133cddd2b0c6f0cc88cea77b76f63f7a9d" 15 | } 16 | ] 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@design-systems/test/jest.config.base'); 2 | 3 | module.exports = { 4 | ...base, 5 | roots: ['/components/', '/packages/'], 6 | projects: [ 7 | '/components/*/jest.config.js', 8 | '/packages/*/jest.config.js' 9 | ], 10 | coverageDirectory: '/coverage/', 11 | collectCoverageFrom: [...base.collectCoverageFrom, '!./src/icons/*.ts*'] 12 | }; 13 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "components/*", 4 | "packages/*" 5 | ], 6 | "version": "1.2.1", 7 | "npmClient": "yarn", 8 | "useWorkspaces": true 9 | } 10 | -------------------------------------------------------------------------------- /packages/create/bin/index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // eslint-disable-next-line 4 | require("../dist/cjs/index.js"); 5 | -------------------------------------------------------------------------------- /packages/create/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/create", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "bin": "./bin/index.js", 7 | "types": "./dist", 8 | "repository": "https://github.com/intuit/devtools-ds", 9 | "author": "Tyler Krupicka github@tylerkrupicka.com", 10 | "contributors": [ 11 | "Tyler Krupicka github@tylerkrupicka.com" 12 | ], 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "license": "MIT", 18 | "scripts": { 19 | "clean": "ds clean", 20 | "build": "ds build", 21 | "start": "ds build --watch", 22 | "storybook": "ds storybook start", 23 | "test": "ds test", 24 | "lint": "ds lint", 25 | "size": "ds size" 26 | }, 27 | "files": [ 28 | "dist", 29 | "src", 30 | "bin", 31 | "templates", 32 | "!*.test.*", 33 | "!__snapshots__", 34 | "!__tests__" 35 | ], 36 | "dependencies": { 37 | "@alumna/reflect": "1.0.5", 38 | "@babel/runtime": "~7.11.2", 39 | "change-case": "4.1.2", 40 | "copy-template-dir": "1.4.0", 41 | "enquirer": "2.3.6", 42 | "signale": "1.4.0", 43 | "uuid": "8.3.2" 44 | }, 45 | "devDependencies": { 46 | "@types/signale": "1.4.1", 47 | "@types/uuid": "8.3.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/create/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/addon-docs/blocks"; 2 | // eslint-disable-next-line 3 | import Readme from '!babel-loader?{"plugins": ["@babel/plugin-transform-react-jsx"]}!@mdx-js/loader!../../README.md'; 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/create/src/stories/React-TS.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/addon-docs/blocks"; 2 | 3 | # React 4 | 5 | 6 | 7 | Our first published template is `react-ts` -- a template configured for, you guessed it, React and TypeScript. 8 | This template is based on extensions we've built in the past, and comes with everything you need to build extension pages in React. 9 | 10 | Some features: 11 | 12 | - Chrome and Firefox 13 | - React 17+ 14 | - PostCSS 15 | - TypeScript 4+ 16 | - Webpack 5 17 | 18 | You should be able to use any of the `@devtools-ds` components directly in your devtools panel without any extra configuration. 19 | 20 | ## Get Started 21 | 22 | ```bash 23 | npm init @devtools-ds 24 | ``` 25 | 26 | Select `react-ts` as the template to get started! 27 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/.circleci/build-zip.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require("fs"); 4 | const path = require("path"); 5 | const archiver = require("archiver"); 6 | 7 | const DEST_DIR = path.join(__dirname, "../dist"); 8 | const DEST_ZIP_DIR = path.join(__dirname, "../dist-zip"); 9 | 10 | const extractExtensionData = () => { 11 | const extPackageJson = require("../package.json"); 12 | 13 | return { 14 | name: extPackageJson.name, 15 | version: extPackageJson.version, 16 | }; 17 | }; 18 | 19 | const makeDestZipDirIfNotExists = () => { 20 | if (!fs.existsSync(DEST_ZIP_DIR)) { 21 | fs.mkdirSync(DEST_ZIP_DIR); 22 | } 23 | }; 24 | 25 | const buildZip = (src, dist, zipFilename) => { 26 | console.info(`Building ${zipFilename}...`); 27 | 28 | const archive = archiver("zip", { zlib: { level: 9 } }); 29 | const stream = fs.createWriteStream(path.join(dist, zipFilename)); 30 | 31 | return new Promise((resolve, reject) => { 32 | archive 33 | .directory(src, false) 34 | .on("error", (err) => reject(err)) 35 | .pipe(stream); 36 | 37 | stream.on("close", () => resolve()); 38 | archive.finalize(); 39 | }); 40 | }; 41 | 42 | const main = () => { 43 | const { name, version } = extractExtensionData(); 44 | const zipFilename = `${name}-v${version}.zip`; 45 | 46 | makeDestZipDirIfNotExists(); 47 | 48 | buildZip(DEST_DIR, DEST_ZIP_DIR, zipFilename) 49 | .then(() => console.info("OK")) 50 | .catch(console.err); 51 | }; 52 | 53 | main(); 54 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/.circleci/firefox-updates.js: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | /* 3 | A simple script to automate FireFox update manifests 4 | https://extensionworkshop.com/documentation/manage/updating-your-extension/ 5 | Only relevant if your addon is not public and hosted by Mozilla 6 | */ 7 | 8 | var fs = require("fs"); 9 | var path = require("path"); 10 | const version = require("../package.json").version; 11 | let updates = require("./updates/updates.json"); 12 | 13 | // add new update 14 | const link = ``; 15 | let update = { 16 | version: version, 17 | update_link: link, 18 | }; 19 | updates.addons["{{uuid}}"].updates.push(update); 20 | fs.writeFileSync( 21 | path.join(__dirname, "./updates/updates.json"), 22 | JSON.stringify(updates, null, 4) 23 | ); 24 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/.circleci/updates/updates.json: -------------------------------------------------------------------------------- 1 | { 2 | "addons": {} 3 | } 4 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@design-systems", 3 | "rules": { 4 | "no-unused-expressions": 0, 5 | "import/no-cycle": 0, 6 | "jsdoc/require-jsdoc": 1, 7 | "@typescript-eslint/no-namespace": 0, 8 | "@typescript-eslint/camelcase": 0, 9 | "@typescript-eslint/no-var-requires": 0, 10 | "@typescript-eslint/ban-ts-comment": 0, 11 | "max-classes-per-file": 0, 12 | "no-underscore-dangle": 0, 13 | "@typescript-eslint/no-empty-function": 0, 14 | "camelcase": 0, 15 | "no-alert":"warn" 16 | } 17 | } -------------------------------------------------------------------------------- /packages/create/templates/react-ts/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /*.log 3 | /dist 4 | /dist_firefox 5 | /dist-zip 6 | .vscode 7 | .DS_Store 8 | /web-ext-artifacts -------------------------------------------------------------------------------- /packages/create/templates/react-ts/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | save-exact=true 3 | package-lock=false -------------------------------------------------------------------------------- /packages/create/templates/react-ts/postcss.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable global-require */ 2 | module.exports = { 3 | plugins: [require("postcss-nested")], 4 | }; 5 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/assets/icon_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intuit/devtools-ds/c64aa769a8fe32a84fc367864dd81de8c5e095bc/packages/create/templates/react-ts/src/assets/icon_128.png -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/assets/icon_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intuit/devtools-ds/c64aa769a8fe32a84fc367864dd81de8c5e095bc/packages/create/templates/react-ts/src/assets/icon_16.png -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/assets/icon_48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intuit/devtools-ds/c64aa769a8fe32a84fc367864dd81de8c5e095bc/packages/create/templates/react-ts/src/assets/icon_48.png -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/background/background.ts: -------------------------------------------------------------------------------- 1 | import { browser, Runtime } from "webextension-polyfill-ts"; 2 | import { DisconnectMessage, Message } from "../types"; 3 | import { 4 | PANEL_SOURCE, 5 | PORT_NAME, 6 | BACKGROUND_SOURCE, 7 | RUNTIME_SOURCE, 8 | } from "../constants"; 9 | import { createLogger } from "../logger"; 10 | import { PortController } from "@devtools-ds/port-controller"; 11 | 12 | const controller = new PortController(); 13 | const logger = createLogger(BACKGROUND_SOURCE); 14 | browser.runtime.onConnect.addListener(function (port) { 15 | if (port.name === PORT_NAME) { 16 | // Connection from DevTools Panel 17 | const panelListener = function (message: Message) { 18 | if (message.type === "connect" && message.tabId) { 19 | controller.connect(message.tabId, port); 20 | } 21 | 22 | // Pass message to content script 23 | controller.toContent(message.tabId, message); 24 | }; 25 | 26 | // Attach listener to the Panel 27 | port.onMessage.addListener(panelListener); 28 | 29 | // Handle Panel disconnect 30 | port.onDisconnect.addListener(function (p) { 31 | const message: DisconnectMessage = { 32 | type: "disconnect", 33 | source: PANEL_SOURCE, 34 | tabId: 0, 35 | }; 36 | controller.disconnect(p, message); 37 | }); 38 | } 39 | }); 40 | 41 | // Attach listener to content 42 | browser.runtime.onMessage.addListener(function ( 43 | message: Message, 44 | sender: Runtime.MessageSender 45 | ) { 46 | // Messages from content scripts should have sender.tab set 47 | if (sender.tab && message.source === RUNTIME_SOURCE) { 48 | const tabId = sender.tab.id; 49 | if (tabId) controller.toPanel(tabId, message); 50 | } else { 51 | logger.log("Could not pass message, sender.tab not defined.", message); 52 | } 53 | }); 54 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const PORT_NAME = "devtools-port"; 2 | export const INJECTED_SCRIPT_ID = "__DEVTOOLS_RUNTIME__"; 3 | 4 | export const RUNTIME_SOURCE = "__DEVTOOLS_RUNTIME__"; 5 | export const CONTENT_SOURCE = "__DEVTOOLS_CONTENT__"; 6 | export const PANEL_SOURCE = "__DEVTOOLS_PANEL__"; 7 | export const POPUP_SOURCE = "__DEVTOOLS_POPUP__"; 8 | export const BACKGROUND_SOURCE = "__DEVTOOLS_BACKGROUND__"; 9 | 10 | export type MESSAGE_SOURCE = 11 | | typeof RUNTIME_SOURCE 12 | | typeof CONTENT_SOURCE 13 | | typeof PANEL_SOURCE 14 | | typeof POPUP_SOURCE 15 | | typeof BACKGROUND_SOURCE; 16 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/content/content.ts: -------------------------------------------------------------------------------- 1 | import { browser } from "webextension-polyfill-ts"; 2 | import { INJECTED_SCRIPT_ID, RUNTIME_SOURCE } from "../constants"; 3 | 4 | /** 5 | * Create a script element to be injected into the dom 6 | * Content scripts can access the DOM but not the JS in the page 7 | * So we'll inject the "runtime" script to run in the page. 8 | */ 9 | function getScript() { 10 | const injectedScript = document.createElement("script"); 11 | injectedScript.src = browser.extension.getURL("../runtime/runtime.js"); 12 | injectedScript.id = INJECTED_SCRIPT_ID; 13 | return injectedScript; 14 | } 15 | 16 | document.documentElement.append(getScript()); 17 | 18 | browser.runtime.onMessage.addListener((message) => { 19 | window.postMessage(message, "*"); 20 | }); 21 | 22 | interface EventData { 23 | /** The source script that sends the event */ 24 | source?: string; 25 | } 26 | 27 | /** 28 | * Any time a message is received from the window, we check if it comes 29 | * from the "runtime" and pass it along. 30 | */ 31 | window.addEventListener("message", (event: MessageEvent) => { 32 | if (event.source !== window) { 33 | return; 34 | } 35 | 36 | if (event.data.source === RUNTIME_SOURCE) { 37 | browser.runtime.sendMessage(event.data); 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/logger.ts: -------------------------------------------------------------------------------- 1 | import { MESSAGE_SOURCE } from "./constants"; 2 | 3 | interface Logger { 4 | /** Log a message */ 5 | log: (...args: any[]) => void; 6 | } 7 | 8 | /** Create a logger that tracks the script source */ 9 | export function createLogger(source: MESSAGE_SOURCE): Logger { 10 | return { 11 | log: (...args: any[]) => { 12 | console.log(source, ...args); 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{projectNameCapital}}", 3 | "description": "Custom developer tools from Devtools-DS", 4 | "devtools_page": "panel/startup.html", 5 | "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", 6 | "version": null, 7 | "manifest_version": 2, 8 | "background": { 9 | "scripts": ["background/background.js"] 10 | }, 11 | "applications": { 12 | "gecko": { 13 | "id": "{{uuid}}" 14 | } 15 | }, 16 | "browser_action": { 17 | "default_icon": { 18 | "128": "assets/icon_128.png" 19 | }, 20 | "default_title": "{{projectNameCapital}}", 21 | "default_popup": "popup/popup.html" 22 | }, 23 | "content_scripts": [ 24 | { 25 | "matches": [""], 26 | "js": ["content/content.js"], 27 | "all_frames": true, 28 | "run_at": "document_start" 29 | } 30 | ], 31 | "permissions": [ 32 | "tabs", 33 | "storage", 34 | "webNavigation", 35 | "http://*/*", 36 | "https://*/*" 37 | ], 38 | "web_accessible_resources": [ 39 | "runtime/runtime.js", 40 | "popup/assets/*", 41 | "panel/assets/*" 42 | ], 43 | "options_ui": { 44 | "page": "options/options.html", 45 | "chrome_style": true 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/options/options.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDom from "react-dom"; 3 | 4 | /** Our React Options Application */ 5 | export const App = () => { 6 | return

This is the Options page, you can add settings here.

; 7 | }; 8 | 9 | const ele = document.createElement("div"); 10 | document.body.appendChild(ele); 11 | 12 | ReactDom.render(, ele); 13 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/panel/global.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/panel/panel.css: -------------------------------------------------------------------------------- 1 | .content { 2 | padding-top: 20px; 3 | margin-left: 20px; 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/panel/startup.ts: -------------------------------------------------------------------------------- 1 | import { browser } from "webextension-polyfill-ts"; 2 | 3 | browser.devtools.panels.create( 4 | "Devtools", 5 | "../assets/icon_48.png", 6 | "/panel/panel.html" 7 | ); 8 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/popup/popup.css: -------------------------------------------------------------------------------- 1 | .content { 2 | width: 210px; 3 | height: 200px; 4 | padding: 20px 20px 0 20px; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/runtime/runtime.ts: -------------------------------------------------------------------------------- 1 | import { Message } from "../types"; 2 | import { RUNTIME_SOURCE } from "../constants"; 3 | import { createLogger } from "../logger"; 4 | 5 | /** Handle messages from the content script. */ 6 | window.addEventListener("message", (event: MessageEvent) => { 7 | const { data } = event; 8 | const logger = createLogger(RUNTIME_SOURCE); 9 | if (data.source && data.source !== RUNTIME_SOURCE) { 10 | switch (data.type) { 11 | case "connect": 12 | logger.log("Connected to Devtools:", data); 13 | break; 14 | case "alert": 15 | alert(data.value); 16 | break; 17 | case "disconnect": 18 | logger.log("Devtools Disconnected:", data); 19 | break; 20 | default: 21 | logger.log("Unknown message type", event.data.type); 22 | break; 23 | } 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/src/types/index.ts: -------------------------------------------------------------------------------- 1 | import { MESSAGE_SOURCE } from "../constants"; 2 | 3 | export interface BaseMessage { 4 | /** Source of the event */ 5 | source: MESSAGE_SOURCE; 6 | /** Type of event */ 7 | type: string; 8 | /** The data being sent */ 9 | value?: any; 10 | /** ID of the Tab being messaged */ 11 | tabId: number; 12 | } 13 | 14 | export interface ConnectMessage extends BaseMessage { 15 | /** Message to connect to the page */ 16 | type: "connect"; 17 | /** No value */ 18 | value?: undefined; 19 | } 20 | 21 | export interface AlertMessage extends BaseMessage { 22 | /** Some text to alert on the screen */ 23 | type: "alert"; 24 | /** No value */ 25 | value: string; 26 | } 27 | 28 | export interface DisconnectMessage extends BaseMessage { 29 | /** Message that the tab is disconnecting */ 30 | type: "disconnect"; 31 | /** No value */ 32 | value?: undefined; 33 | } 34 | 35 | export type Message = ConnectMessage | DisconnectMessage | AlertMessage; 36 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "ES6", 5 | "lib": ["ESNext", "DOM"], 6 | "outDir": "dist", 7 | "jsx": "react", 8 | "sourceMap": true, 9 | "strict": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "importHelpers": true 13 | }, 14 | "exclude": ["node_modules"], 15 | "include": ["./src/**/*", "./typings/**/*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/create/templates/react-ts/typings/css.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css" { 2 | interface ClassNames { 3 | [className: string]: string; 4 | } 5 | const classNames: ClassNames; 6 | export = classNames; 7 | } 8 | -------------------------------------------------------------------------------- /packages/create/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/docs/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # vnull (Sun Jan 24 2021) 2 | 3 | #### 🐛 Bug Fix 4 | 5 | - Bump version to: v0.130.1 \[skip ci\] (https://github.com/tylerkrupicka) 6 | 7 | #### ⚠️ Pushed to `master` 8 | 9 | - set access in package json (https://github.com/tylerkrupicka) 10 | 11 | #### Authors: 1 12 | 13 | - Tyler Krupicka (https://github.com/tylerkrupicka) 14 | -------------------------------------------------------------------------------- /packages/docs/README.md: -------------------------------------------------------------------------------- 1 | # @devtools-ds/docs 2 | 3 | Welcome to my `Docs` package. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @devtools-ds/docs 9 | # or with yarn 10 | yarn add @devtools-ds/docs 11 | ``` 12 | 13 | ```js 14 | import Docs from "@devtools-ds/docs"; 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/docs/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/docs", 3 | "private": true, 4 | "version": "1.2.1", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "repository": "https://github.com/intuit/devtools-ds", 9 | "author": "Tyler Krupicka github@tylerkrupicka.com", 10 | "contributors": [ 11 | "Tyler Krupicka github@tylerkrupicka.com" 12 | ], 13 | "license": "MIT", 14 | "publishConfig": { 15 | "registry": "https://registry.npmjs.org/", 16 | "access": "public" 17 | }, 18 | "scripts": { 19 | "clean": "ds clean", 20 | "build": "ds build", 21 | "start": "ds build --watch", 22 | "storybook": "ds storybook start", 23 | "test": "ds test", 24 | "lint": "ds lint", 25 | "size": "ds size" 26 | }, 27 | "files": [ 28 | "dist", 29 | "src", 30 | "!*.test.*", 31 | "!__snapshots__", 32 | "!__tests__" 33 | ], 34 | "dependencies": { 35 | "@babel/runtime": "~7.11.2" 36 | }, 37 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 38 | } 39 | -------------------------------------------------------------------------------- /packages/docs/src/Gallery.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/addon-docs/blocks"; 2 | import { Gallery } from "@doc-blocks/gallery"; 3 | 4 | 5 | 6 | # Gallery 7 | 8 | A showcase of frequently-used components. 9 | 10 | 15 | -------------------------------------------------------------------------------- /packages/docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/object-parser/README.md: -------------------------------------------------------------------------------- 1 | # @devtools-ds/object-parser 2 | 3 | Object parser is a utility used by the the `Object Inspector` package, which creates a JSON tree structure with node types that help simplify the JavaScript type system. It also uses TypeScript to make logic around using the tree strongly typed. 4 | 5 | If you plan on using this, I recommend looking at the type definitions for the best description of how it formats. 6 | 7 | The current supported types are: 8 | 9 | ```ts 10 | export type SupportedTypes = 11 | | boolean 12 | | null 13 | | number 14 | | string 15 | | Error 16 | | symbol 17 | | undefined 18 | | Date 19 | | RegExp 20 | | object 21 | | Map 22 | | WeakMap 23 | | Set 24 | | WeakSet 25 | | Promise 26 | | any[] 27 | | Function; 28 | ``` 29 | 30 | ## Installation 31 | 32 | ```sh 33 | npm i @devtools-ds/object-parser 34 | # or with yarn 35 | yarn add @devtools-ds/object-parser 36 | ``` 37 | 38 | ## Usage 39 | 40 | ```js 41 | import parse from "@devtools-ds/object-parser"; 42 | 43 | const data = { foo: "bar" }; 44 | const sortKeys = true; 45 | const result = await parse(data, sortKeys); 46 | ``` 47 | 48 | ## FAQ 49 | 50 | ### Why is it asynchronous? 51 | 52 | Unfortunately, the parser has to be asynchronous in order to support Promises. From what I can find, there is [no good way](https://stackoverflow.com/questions/30564053/how-can-i-synchronously-determine-a-javascript-promises-state) to inspect a promise synchronously. In the browser devtools they have access to the full Javascript engine. 53 | 54 | ### Why do children return a function? 55 | 56 | This parser is in service to building a UI, which needs to be responsive. In deeply nested objects, we want to avoid having to parse everything before we can render the top node. To stop this, the parser only evaluates the current node, and then returns functions so that you can get the children on demand. For example, when you are expanding a tree view. 57 | -------------------------------------------------------------------------------- /packages/object-parser/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('@design-systems/test/jest.config.base'); 2 | const { name } = require('./package.json'); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name 8 | }; 9 | -------------------------------------------------------------------------------- /packages/object-parser/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/object-parser", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": false, 18 | "scripts": { 19 | "clean": "ds clean", 20 | "build": "ds build", 21 | "start": "ds build --watch", 22 | "storybook": "ds storybook start", 23 | "test": "ds test", 24 | "lint": "ds lint", 25 | "size": "ds size" 26 | }, 27 | "files": [ 28 | "dist", 29 | "src", 30 | "!*.test.*", 31 | "!__snapshots__", 32 | "!__tests__" 33 | ], 34 | "dependencies": { 35 | "@babel/runtime": "~7.5.4" 36 | }, 37 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 38 | } 39 | -------------------------------------------------------------------------------- /packages/object-parser/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/addon-docs/blocks"; 2 | // eslint-disable-next-line 3 | import Readme from '!babel-loader?{"plugins": ["@babel/plugin-transform-react-jsx"]}!@mdx-js/loader!../../README.md'; 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/object-parser/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/port-controller/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.3 (Thu Feb 25 2021) 2 | 3 | #### 🐛 Bug Fix 4 | 5 | - Perf: Better Tree Shaking [#16](https://github.com/intuit/devtools-ds/pull/16) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 6 | - stop autothemeprovider from leaking dependencies ([@tylerkrupicka](https://github.com/tylerkrupicka)) 7 | 8 | #### Authors: 1 9 | 10 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 11 | 12 | --- 13 | 14 | # v0.133.0 (Mon Feb 01 2021) 15 | 16 | #### 🚀 Enhancement 17 | 18 | - Add Port Controller [#7](https://github.com/intuit/devtools-ds/pull/7) ([@tylerkrupicka](https://github.com/tylerkrupicka)) 19 | 20 | #### 🐛 Bug Fix 21 | 22 | - break out port controller ([@tylerkrupicka](https://github.com/tylerkrupicka)) 23 | 24 | #### Authors: 1 25 | 26 | - Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka)) 27 | -------------------------------------------------------------------------------- /packages/port-controller/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/port-controller/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/port-controller", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "publishConfig": { 13 | "registry": "https://registry.npmjs.org/", 14 | "access": "public" 15 | }, 16 | "sideEffects": false, 17 | "license": "MIT", 18 | "scripts": { 19 | "clean": "ds clean", 20 | "build": "ds build", 21 | "start": "ds build --watch", 22 | "storybook": "ds storybook start", 23 | "test": "ds test", 24 | "lint": "ds lint", 25 | "size": "ds size" 26 | }, 27 | "files": [ 28 | "dist", 29 | "src", 30 | "!*.test.*", 31 | "!__snapshots__", 32 | "!__tests__" 33 | ], 34 | "dependencies": { 35 | "@babel/runtime": "~7.11.2", 36 | "webextension-polyfill-ts": "0.24.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/port-controller/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { browser, Runtime } from "webextension-polyfill-ts"; 2 | 3 | /** Manage port connections between the panel and page */ 4 | export class PortController { 5 | ports: { [key: number]: Array }; 6 | 7 | constructor() { 8 | this.ports = {}; 9 | } 10 | 11 | /* Connect a port to a tab (web page) */ 12 | connect(tabId: number, port: Runtime.Port) { 13 | if (!this.ports[tabId]) { 14 | this.ports[tabId] = []; 15 | } 16 | 17 | this.ports[tabId].push(port); 18 | } 19 | 20 | // Disconnect a port, given only a port 21 | // Also notify the page to disconnect 22 | disconnect(port: Runtime.Port, message?: T) { 23 | for (const t of Object.keys(this.ports)) { 24 | const tab = Number(t); 25 | this.ports[tab] = this.ports[tab].filter((p) => p !== port); 26 | if (this.ports[tab].length === 0) { 27 | if (message) { 28 | this.toContent(tab, message); 29 | } 30 | 31 | delete this.ports[tab]; 32 | } 33 | } 34 | } 35 | 36 | // Return whether a tab has an active port. 37 | getPorts(tabId: number) { 38 | return this.ports[tabId]; 39 | } 40 | 41 | // Send a message to the content script for a given tab 42 | toContent(tabId: number, message: T) { 43 | if (message && tabId) { 44 | browser.tabs.sendMessage(tabId, message); 45 | } 46 | } 47 | 48 | // Send a message to the devtools for a given tab 49 | toPanel(tabId: number, message: T) { 50 | if (tabId in this.ports) { 51 | const tab = this.ports[tabId]; 52 | for (let i = 0; i < tab.length; i++) { 53 | tab[i].postMessage(message); 54 | } 55 | } 56 | } 57 | } 58 | 59 | export default PortController; 60 | -------------------------------------------------------------------------------- /packages/port-controller/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/addon-docs/blocks"; 2 | // eslint-disable-next-line 3 | import Readme from '!babel-loader?{"plugins": ["@babel/plugin-transform-react-jsx"]}!@mdx-js/loader!../../README.md'; 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/port-controller/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # vnull (Sun Jan 24 2021) 2 | 3 | #### 🐛 Bug Fix 4 | 5 | - Bump version to: v0.130.1 \[skip ci\] (https://github.com/tylerkrupicka) 6 | 7 | #### ⚠️ Pushed to `master` 8 | 9 | - set access in package json (https://github.com/tylerkrupicka) 10 | 11 | #### Authors: 1 12 | 13 | - Tyler Krupicka (https://github.com/tylerkrupicka) 14 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/README.md: -------------------------------------------------------------------------------- 1 | # @devtools-ds/storybook-theme-addon 2 | 3 | The theme add-on adds a global theme selection button to Storybook. 4 | It uses a decorator to add a browser theme provider to each story. 5 | 6 | ## Installation 7 | 8 | ```sh 9 | npm i @devtools-ds/storybook-theme-addon 10 | # or with yarn 11 | yarn add @devtools-ds/storybook-theme-addon 12 | ``` 13 | 14 | ```js 15 | import ThemeSelectTool from "@devtools-ds/storybook-theme-addon"; 16 | ``` 17 | 18 | ## Usage 19 | 20 | **`main.js`:** 21 | 22 | ```js 23 | module.exports = { 24 | addons: ["@devtools-ds/storybook-theme-addon"], 25 | }; 26 | ``` 27 | 28 | **`main.js`:** 29 | 30 | ```js 31 | import { ThemeDecorator } from "@devtools-ds/storybook-theme-addon"; 32 | ``` 33 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/storybook-theme-addon", 3 | "private": true, 4 | "version": "1.2.1", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "repository": "https://github.com/intuit/devtools-ds", 9 | "author": "Tyler Krupicka github@tylerkrupicka.com", 10 | "contributors": [ 11 | "Tyler Krupicka github@tylerkrupicka.com" 12 | ], 13 | "license": "MIT", 14 | "publishConfig": { 15 | "registry": "https://registry.npmjs.org/", 16 | "access": "public" 17 | }, 18 | "scripts": { 19 | "clean": "ds clean", 20 | "build": "ds build", 21 | "start": "ds build --watch", 22 | "test": "ds test", 23 | "lint": "ds lint", 24 | "size": "ds size" 25 | }, 26 | "files": [ 27 | "dist", 28 | "src", 29 | "register.js", 30 | "!*.test.*", 31 | "!__snapshots__", 32 | "!__tests__" 33 | ], 34 | "dependencies": { 35 | "@babel/runtime": "7.11.2", 36 | "@devtools-ds/themes": "link:../themes", 37 | "@storybook/addons": "^6.1.9", 38 | "@storybook/api": "^6.1.9", 39 | "@storybook/channels": "^6.1.9", 40 | "@storybook/components": "^6.1.9", 41 | "@storybook/core-events": "^6.1.9", 42 | "@storybook/react": "^6.1.9" 43 | }, 44 | "peerDependencies": { 45 | "react": "16.13.1" 46 | }, 47 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 48 | } 49 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/register.js: -------------------------------------------------------------------------------- 1 | require("./dist/esm/index").register(); 2 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const ADDON_ID = "devtools-ds/addon"; 2 | export const THEME_SELECT_TOOL_ID = `${ADDON_ID}/theme-select-tool`; 3 | export const PARAMETER_NAME = "themePicker"; 4 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import addons, { types } from "@storybook/addons"; 3 | import { ThemeTool } from "./theme/theme"; 4 | import { ADDON_ID, THEME_SELECT_TOOL_ID, PARAMETER_NAME } from "./constants"; 5 | 6 | /** Register addons with storybook */ 7 | export function register() { 8 | addons.register(ADDON_ID, () => { 9 | // Tools show up in the top panel 10 | 11 | addons.add(THEME_SELECT_TOOL_ID, { 12 | title: "Theme Selection", 13 | type: types.TOOL, 14 | paramKey: PARAMETER_NAME, 15 | render: () => , 16 | }); 17 | }); 18 | } 19 | 20 | export { ThemeDecorator } from "./theme/theme"; 21 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/src/theme/icons/chrome-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intuit/devtools-ds/c64aa769a8fe32a84fc367864dd81de8c5e095bc/packages/storybook-theme-addon/src/theme/icons/chrome-logo.png -------------------------------------------------------------------------------- /packages/storybook-theme-addon/src/theme/icons/chrome.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import ChromeLogo from "./chrome-logo.png"; 4 | 5 | /** Chrome icon */ 6 | const Chrome = () => ( 7 | Chrome Logo 14 | ); 15 | 16 | export default Chrome; 17 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/src/theme/icons/firefox-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intuit/devtools-ds/c64aa769a8fe32a84fc367864dd81de8c5e095bc/packages/storybook-theme-addon/src/theme/icons/firefox-logo.png -------------------------------------------------------------------------------- /packages/storybook-theme-addon/src/theme/icons/firefox.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import FireFoxLogo from "./firefox-logo.png"; 4 | 5 | /** FireFox icon */ 6 | const FireFox = () => ( 7 | FireFox Logo 14 | ); 15 | 16 | export default FireFox; 17 | -------------------------------------------------------------------------------- /packages/storybook-theme-addon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true, 9 | "skipLibCheck": true 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/storybook-utils/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # vnull (Sun Jan 24 2021) 2 | 3 | #### 🐛 Bug Fix 4 | 5 | - Bump version to: v0.130.1 \[skip ci\] (https://github.com/tylerkrupicka) 6 | 7 | #### ⚠️ Pushed to `master` 8 | 9 | - set access in package json (https://github.com/tylerkrupicka) 10 | 11 | #### Authors: 1 12 | 13 | - Tyler Krupicka (https://github.com/tylerkrupicka) 14 | -------------------------------------------------------------------------------- /packages/storybook-utils/README.md: -------------------------------------------------------------------------------- 1 | # @devtools-ds/storybook-utils 2 | 3 | Utilities for improving stories in the `@devtools-ds` storybook. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @devtools-ds/storybook-utils 9 | # or with yarn 10 | yarn add @devtools-ds/storybook-utils 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/storybook-utils/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/storybook-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/storybook-utils", 3 | "private": true, 4 | "version": "1.2.1", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "repository": "https://github.com/intuit/devtools-ds", 9 | "author": "Tyler Krupicka github@tylerkrupicka.com", 10 | "contributors": [ 11 | "Tyler Krupicka github@tylerkrupicka.com" 12 | ], 13 | "license": "MIT", 14 | "publishConfig": { 15 | "registry": "https://registry.npmjs.org/", 16 | "access": "public" 17 | }, 18 | "scripts": { 19 | "clean": "ds clean", 20 | "build": "ds build", 21 | "check-types": "ds check-types", 22 | "start": "ds build --watch", 23 | "test": "ds test", 24 | "lint": "ds lint", 25 | "size": "ds size" 26 | }, 27 | "files": [ 28 | "dist", 29 | "!*.test.*", 30 | "!__snapshots__", 31 | "!__tests__" 32 | ], 33 | "dependencies": { 34 | "@babel/runtime": "~7.5.4" 35 | }, 36 | "peerDependencies": { 37 | "react": ">= 16.8.6" 38 | }, 39 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 40 | } 41 | -------------------------------------------------------------------------------- /packages/storybook-utils/src/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Overrides the toString on a function so that it addon-jsx prints 3 | * the callbacks in a copy-paste-able way. 4 | */ 5 | export const callback = ( 6 | fn: T, 7 | description?: string 8 | ): T => { 9 | /** A toString to render the function in storybook */ 10 | // eslint-disable-next-line no-param-reassign 11 | fn.toString = () => description || "() => {}"; 12 | return fn; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/storybook-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/themes/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/themes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@devtools-ds/themes", 3 | "version": "1.2.1", 4 | "main": "./dist/cjs/index.js", 5 | "module": "./dist/esm/index.js", 6 | "types": "./dist", 7 | "repository": "https://github.com/intuit/devtools-ds", 8 | "author": "Tyler Krupicka github@tylerkrupicka.com", 9 | "contributors": [ 10 | "Tyler Krupicka github@tylerkrupicka.com" 11 | ], 12 | "license": "MIT", 13 | "publishConfig": { 14 | "registry": "https://registry.npmjs.org/", 15 | "access": "public" 16 | }, 17 | "sideEffects": false, 18 | "scripts": { 19 | "clean": "ds clean", 20 | "build": "ds build", 21 | "dev": "ds dev", 22 | "storybook": "ds storybook start", 23 | "start": "ds build --watch", 24 | "test": "ds test", 25 | "lint": "ds lint", 26 | "size": "ds size" 27 | }, 28 | "files": [ 29 | "dist", 30 | "src", 31 | "!*.test.*", 32 | "!__snapshots__", 33 | "!__tests__" 34 | ], 35 | "dependencies": { 36 | "@babel/runtime": "~7.5.4", 37 | "@design-systems/utils": "2.12.0", 38 | "clsx": "1.1.0" 39 | }, 40 | "peerDependencies": { 41 | "react": ">= 16.8.6" 42 | }, 43 | "gitHead": "abfe550409142712633f50144b35102a0e62e43f" 44 | } 45 | -------------------------------------------------------------------------------- /packages/themes/src/index.test.ts: -------------------------------------------------------------------------------- 1 | test("something", () => { 2 | expect(2 + 2).toBe(4); 3 | }); 4 | -------------------------------------------------------------------------------- /packages/themes/src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./themes"; 2 | export * from "./utils"; 3 | export * from "./AutoThemeProvider"; 4 | -------------------------------------------------------------------------------- /packages/themes/src/stories/Features.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ThemeGrid } from "./ThemeGrid"; 3 | 4 | import { chrome, firefox, AutoThemeProvider } from ".."; 5 | import notes from "../../README.md"; 6 | 7 | export default { 8 | title: "Utilities/Themes/Features", 9 | parameters: { notes }, 10 | }; 11 | 12 | export const BrowserThemes = () => ( 13 |
14 | 15 | 16 |
17 | ); 18 | 19 | export const AutomaticTheming = () => ( 20 | 21 |
22 | This story changes themes automatically based on your browser and color 23 | scheme. 24 |
25 | 26 | ); 27 | -------------------------------------------------------------------------------- /packages/themes/src/stories/Overview.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Description, Title } from "@storybook/addon-docs/blocks"; 2 | import { Version } from "@doc-blocks/version"; 3 | import { ShieldRow } from "@doc-blocks/shield-row"; 4 | 5 | import notes from "../../README.md"; 6 | import { version } from "../../package.json"; 7 | 8 | 9 | 10 | @devtools-ds/themes 11 | 12 | --- 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 |
24 | -------------------------------------------------------------------------------- /packages/themes/src/stories/ThemeGrid.css: -------------------------------------------------------------------------------- 1 | .theme { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-between; 5 | margin-bottom: 20px; 6 | 7 | @media only screen and (max-width: 600px) { 8 | flex-direction: column; 9 | } 10 | } 11 | 12 | .list { 13 | width: 100%; 14 | list-style-type: none; 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | .item { 20 | height: 60px; 21 | display: flex; 22 | flex-direction: row; 23 | margin: 0; 24 | padding: 0 20px 0 0; 25 | 26 | .box { 27 | border: 1px solid #adadad; 28 | flex-shrink: 0; 29 | width: 60px; 30 | height: 60px; 31 | } 32 | 33 | .label { 34 | display: flex; 35 | flex-direction: column; 36 | justify-content: center; 37 | margin-left: 20px; 38 | 39 | h2, 40 | h4 { 41 | margin: 0; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/themes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src/**/*", "../../typings/**/*"], 4 | 5 | "compilerOptions": { 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "composite": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const mixins = require("postcss-mixins"); 2 | const calc = require("postcss-calc"); 3 | const mix = require("postcss-color-mix"); 4 | 5 | const themed = require("postcss-themed").default; 6 | const defaultConfig = require("@design-systems/build/postcss.config"); 7 | 8 | module.exports = (ctx) => { 9 | const config = defaultConfig(ctx); 10 | const [nested, ...rest] = config.plugins; 11 | const plugins = [ 12 | mixins({}), 13 | // Nested must come after mixins because mixin might have nesting 14 | nested, 15 | // Themed must come after nested so theme classnames are properly generated 16 | themed({ 17 | config: { 18 | firefox: {}, 19 | chrome: {}, 20 | }, 21 | defaultTheme: "firefox", 22 | }), 23 | calc(), 24 | mix, 25 | ...rest, 26 | ]; 27 | 28 | return { 29 | ...config, 30 | plugins, 31 | }; 32 | }; 33 | -------------------------------------------------------------------------------- /proof.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('@design-systems/proof/proof.config.base.js'); 2 | const AddAllPlugin = require('@proof-ui/add-all-plugin').default; 3 | const A11YPlugin = require('@proof-ui/a11y-plugin').default; 4 | 5 | const plugins = baseConfig.plugins.map(plugin => { 6 | if (plugin instanceof AddAllPlugin) { 7 | return new AddAllPlugin(); 8 | } 9 | 10 | if (plugin instanceof A11YPlugin) { 11 | return new A11YPlugin({ 12 | config: { 13 | rules: [ 14 | { 15 | id: 'color-contrast', 16 | enabled: false 17 | }, 18 | { 19 | id: 'label', 20 | none: ['help-same-as-label', 'multiple-label'] 21 | } 22 | ] 23 | } 24 | }); 25 | } 26 | 27 | return plugin; 28 | }); 29 | 30 | const newConfig = { 31 | ...baseConfig, 32 | waitForRoot: 30000, 33 | plugins: [...plugins] 34 | }; 35 | 36 | module.exports = newConfig; 37 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "esModuleInterop": true, 8 | "sourceMap": true, 9 | "skipLibCheck": true, 10 | "declaration": true, 11 | "lib": ["es6", "es2017", "dom", "es2019"], 12 | "experimentalDecorators": true, 13 | "resolveJsonModule": true, 14 | "downlevelIteration": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.build.json", 3 | "compilerOptions": { 4 | // Monorepo support 5 | "baseUrl": ".", 6 | "paths": { 7 | "@devtools-ds/*": ["components/*/src", "packages/*/src"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.stories.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.build.json", 3 | "include": ["packages/**/*", "components/**/*", "typings/**/*"], 4 | "exclude": ["packages/create/templates/**/*"], 5 | "compilerOptions": { 6 | "skipLibCheck": true, 7 | "noEmit": true, 8 | // Monorepo support 9 | "baseUrl": ".", 10 | "paths": { 11 | "@devtools-ds/*": ["components/*/src", "packages/*/src"] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /typings/copy-template-dir.d.ts: -------------------------------------------------------------------------------- 1 | declare module "copy-template-dir" { 2 | export default function template( 3 | source: string, 4 | output: string, 5 | options: any, 6 | cb: (err: Error, createdFiles: string[]) => void 7 | ): void; 8 | } 9 | -------------------------------------------------------------------------------- /typings/css.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' { 2 | interface ClassNames { 3 | [className: string]: string; 4 | } 5 | const classNames: ClassNames; 6 | export = classNames; 7 | } 8 | -------------------------------------------------------------------------------- /typings/emotion.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@emotion/core'; 2 | -------------------------------------------------------------------------------- /typings/image.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.gif'; 2 | declare module '*.png'; 3 | declare module '*.svg'; 4 | -------------------------------------------------------------------------------- /typings/jest-dom.d.ts: -------------------------------------------------------------------------------- 1 | declare module "@testing-library/jest-dom/extend-expect"; 2 | -------------------------------------------------------------------------------- /typings/markdown.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.md' { 2 | const value: string; 3 | export const path: string; 4 | export default value; 5 | } 6 | 7 | declare module '*.mdx' { 8 | const value: string; 9 | export default value; 10 | } 11 | -------------------------------------------------------------------------------- /typings/reflect.d.ts: -------------------------------------------------------------------------------- 1 | declare module "@alumna/reflect"; 2 | -------------------------------------------------------------------------------- /typings/storybook.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@storybook/addon-viewport'; 2 | --------------------------------------------------------------------------------