@opentrons/components 0.0.0-alpha.10

package/Makefile

@@ -0,0 +1,42 @@
+# opentrons component library makefile
+
+# dev server port
+port ?= 6060
+
+# These variables can be overriden when make is invoked to customize the
+# behavior of jest
+tests ?=
+cov_opts ?= --coverage=true --ci=true --collectCoverageFrom='components/src/**/*.(js|ts|tsx)'
+test_opts ?=
+
+# standard targets
+#####################################################################
+
+.PHONY: all
+all: clean dist
+
+.PHONY: clean
+clean:
+	yarn --cwd .. shx rm -rf storybook-static
+
+# artifacts
+#####################################################################
+
+.PHONY: dist
+dist:
+	yarn --cwd .. build-storybook
+
+# development
+#####################################################################
+
+.PHONY: dev
+dev:
+	yarn --cwd .. start-storybook --port $(port)
+
+.PHONY: test
+test:
+	$(MAKE) -C .. test-js-components tests="$(tests)" test_opts="$(test_opts)"
+
+.PHONY: test-cov
+test-cov:
+	make -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"

package/README.md

@@ -0,0 +1,87 @@
+# opentrons components library
+
+React components for Opentrons' applications. Visit the [Opentrons Components Library][components-library] to see available components.
+
+[components-library]: https://s3-us-west-2.amazonaws.com/opentrons-components/edge/index.html
+
+## example usage
+
+```javascript
+import { PrimaryButton } from '@opentrons/components'
+
+export default function CowButton(props) {
+  return <PrimaryButton onClick={() => console.log('🐄')} />
+}
+```
+
+## setup
+
+Usage requirements for dependent projects:
+
+- Node v12 and yarn
+- The following `dependencies` (peer dependencies of `@opentrons/components`)
+  - `react`: `17.0.1`,
+  - `react-router-dom`: `^4.2.2`,
+  - `classnames`: `^2.2.5`,
+  - `lodash`: `^4.17.4`
+
+### new project setup (optional)
+
+If you ever need to set up a new project in the monorepo that depends on the components library:
+
+1.  Add the new project to `workspaces` in the repository's `package.json`
+2.  Ensure the required peer dependencies (listed above) are also in `dependencies`
+    ```shell
+    yarn workspace new-project add react@17.0.1 react-router-dom@^4.2.2 classnames@^2.2.5 lodash@^4.17.4
+    ```
+3.  Add `@opentrons/components` at the current version to `dependencies` in the new project's `package.json`
+4.  Run `yarn`
+
+If you use the base webpack config in `@opentrons/webpack-config`, the project should import and bundle components from the components library correctly.
+
+## contributing
+
+Make sure you have read the top-level [Contributing Guide][contributing].
+
+### unit tests
+
+Unit tests are run with the rest of the repositories unit tests from the top level of the project.
+
+```shell
+make test-js
+```
+
+Unit tests live in a `__tests__` directory in the same directory as the module under test. When writing unit tests for components, we've found the following tests to be the most useful:
+
+- DOM tests
+  - Make sure the component renders the correct node type
+  - Make sure DOM attributes are mapped correctly
+  - Make sure handlers fire correctly
+- Render tests
+
+  - Snapshot tests using [jest's snapshot functionality][jest-snapshots]
+  - To regenerate snapshots after an intentional rendering change, run:
+
+  ```shell
+  make test-js updateSnapshot=true
+  ```
+
+[jest-snapshots]: https://facebook.github.io/jest/docs/en/snapshot-testing.html
+[contributing]: ../CONTRIBUTING.md
+
+### Flow definitions
+
+While the components library is written in TypeScript, some dependents of the components library are not yet converted. To ease the conversion effort, `components/flow-types` contains automatically generated Flow type definitions from the TypeScript typings generated by `tsc`.
+
+To generate these definitions
+
+```shell
+# ensure all TypeScript definitions are built
+make build-ts
+
+# build flow definitions (this may take a while!)
+make -C components flow-types
+
+# you can also build individual files if you're testing out small changes
+make -C components flow-types/buttons/Button.js.flow
+```

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@opentrons/components",
+  "version": "0.0.0-alpha.10",
+  "description": "React components library for Opentrons' projects",
+  "source": "src/index.ts",
+  "types": "lib/index.d.ts",
+  "style": "src/index.css",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Opentrons/opentrons.git"
+  },
+  "author": "Opentrons Labworks <engineering@opentrons.com> (https://opentrons.com)",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/Opentrons/opentrons/issues"
+  },
+  "homepage": "https://github.com/Opentrons/opentrons#readme",
+  "peerDependencies": {
+    "react": "17.0.1",
+    "react-router-dom": "5.1.1"
+  },
+  "dependencies": {
+    "@opentrons/shared-data": "link:../shared-data",
+    "@popperjs/core": "2.1.1",
+    "@react-spring/types": "9.6.1",
+    "@react-spring/web": "9.6.1",
+    "@types/classnames": "2.2.5",
+    "@types/lodash": "^4.14.191",
+    "@types/react": "^17.0.1",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/styled-components": "^5.1.26",
+    "@types/webpack-env": "^1.16.0",
+    "classnames": "2.2.5",
+    "interactjs": "^1.10.17",
+    "lodash": "4.17.21",
+    "react-popper": "1.0.0",
+    "react-remove-scroll": "2.4.3",
+    "react-select": "5.4.0",
+    "styled-components": "5.3.6"
+  },
+  "browser": {
+    "jest-when": false
+  }
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig-base.json",
+  "references": [
+    {
+      "path": "../shared-data"
+    }
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "src",
+    "outDir": "lib"
+  },
+  "include": ["typings", "src"],
+  "exclude": ["**/*.stories.tsx"]
+}

package/typings/css-module.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css' {
+  const styles: { [key: string]: string }
+  // eslint-disable-next-line import/no-default-export
+  export default styles
+}

package/typings/global.d.ts

@@ -0,0 +1,2 @@
+import 'jest-styled-components'
+import 'styled-components/cssprop'

package/typings/images.d.ts

@@ -0,0 +1,10 @@
+declare module '*.png' {
+  const image: string
+  // eslint-disable-next-line import/no-default-export
+  export default image
+}
+declare module '*.svg' {
+  const image: string
+  // eslint-disable-next-line import/no-default-export
+  export default image
+}