@manifoldco/mercury - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

components/_select.scss

package.json

		@@ -13,3 +13,3 @@ {
		},
		"version": "0.1.1",
		"version": "0.1.2",
		"main": "index.cjs.js",
		@@ -20,18 +20,20 @@ "module": "index.mjs",
		"license": "BSD-3",
		"dependencies": {},
		"dependencies": {
		"react-copy-button-wrapper": "0.0.6"
		},
		"devDependencies": {
		"@babel/core": "^7.9.0",
		"@babel/preset-env": "^7.9.0",
		"@babel/preset-env": "^7.9.5",
		"@babel/preset-typescript": "^7.9.0",
		"@figma-export/cli": "^2.0.0",
		"@figma-export/output-components-as-svg": "^2.0.0",
		"@figma-export/output-components-as-svg": "^2.1.0",
		"@figma-export/transform-svg-with-svgo": "^2.0.0",
		"@storybook/addon-knobs": "^5.3.18",
		"@storybook/html": "^5.3.18",
		"@types/jest": "^25.1.4",
		"@types/node": "^13.9.8",
		"@types/prettier": "^1.19.1",
		"@typescript-eslint/eslint-plugin": "^2.26.0",
		"@typescript-eslint/parser": "^2.26.0",
		"@storybook/react": "^5.3.18",
		"@types/jest": "^25.2.1",
		"@types/node": "^13.11.0",
		"@types/prettier": "^2.0.0",
		"@typescript-eslint/eslint-plugin": "^2.27.0",
		"@typescript-eslint/parser": "^2.27.0",
		"babel-loader": "^8.1.0",
		"css-in-js-utils": "^3.0.4",
		"deepmerge": "^4.2.2",
		@@ -42,11 +44,18 @@ "eslint": "^6.8.0",
		"figma-js": "^1.10.0",
		"jest": "^25.2.4",
		"jest-cli": "^25.2.4",
		"prettier": "^2.0.2",
		"jest": "^25.3.0",
		"jest-cli": "^25.3.0",
		"prettier": "^2.0.4",
		"prismjs": "^1.20.0",
		"react": "^16.13.1",
		"rgb2hex": "^0.1.10",
		"sass": "^1.26.3",
		"sass-loader": "^8.0.2",
		"ts-node": "^8.8.1",
		"stylelint": "^13.3.0",
		"stylelint-config-prettier": "^8.0.1",
		"stylelint-config-rational-order": "^0.1.2",
		"stylelint-config-standard": "^20.0.0",
		"stylelint-order": "^4.0.0",
		"ts-node": "^8.8.2",
		"typescript": "^3.8.3"
		}
		}

115

README.md

		@@ -5,3 +5,3 @@ # ☤ Mercury

		[👉 View Storybook][storybook]
		[![Screenshot of Mercury](./.github/mercury.png)][storybook]

		@@ -16,71 +16,78 @@ ## 💽 Usage

		### 👓 Sass
		To view the component library:

		Mercury ships with some [Sass Modules][sass-modules] which can be imported and extended if you’re
		using version `1.23.0` or greater:
		[📚 Visit Storybook][storybook]

		```scss
		@use "node_modules/@manifoldco/mercury";
		## Contributing

		.Manifold__Button {
		@include mercury.Manifold__Button; /* extend button styles */
		@include mercury.Manifold__Typography__Body;
		### 🏎️ Setup

		background: mercury.$color-purple; /* provide overrides from common variables */
		color: mercury.$color-white;
		font-family: mercury.$typography-bodyMono-fontFamily;
		}
		```
		npm install
		npm run dev
		```

		For reference, please see the [generated `.scss` files][local-scss] which are tracked in version
		control.
		### 🗿 How do I add new components?

		### 🐢 JS
		Components live in the [`./src/components/`][local-components] folder, in `*.scss` files. To add a
		new `widget` component:

		```js
		import { css } from 'linaria';
		import { color, typography } from '@manifoldco/mercury';
		1. Create a new Sass `@mixin` at `src/components/_widget.scss` using [our CSS
		styleguide][manifold-css]. Refer to the other `*.scss` files in that folder for reference.
		1. Create a Storybook Story by making a new `stories/widget.stories.js` for the markup, and
		`stories/widget.scss` if needed. Refer to the other stories for reference.
		1. Document the component as well as you can!

		const header = css`
		font-family: ${typography.body.fontFamily};
		color: ${color.black};
		`;
		```
		Some good things to keep in mind:

		## 🌈 Tokens
		- The `.scss` file you ship in `src/components` will be shipped with Mercury.* Make sure it’s
		polished!
		- ⚠️ Any Sass or CSS you add in `stories/` will NOT ship with Mercury.* Make sure that you
		didn’t accidentally leave essential styles in there!
		- ⚠️ Only write `@mixin`s in Sass.These allow the consumer to pick the final CSS class names, and
		they also allow build CSS to tree-shake (important for Manifold Components).

		\| Group \| Sass \| JS \|
		\| :------------------------------------------------ \| :-------------- \| :------------- \|
		\| [Color](./src/design-tokens/color.scss) \| `$color-` \| `color.` \|
		\| [Gradient](./src/design-tokens/gradient.scss) \| `$gradient-` \| `gradient.` \|
		\| [Shadow](./src/design-tokens/shadow.scss) \| `$shadow-` \| `shadow.` \|
		\| [Typography](./src/design-tokens/typography.scss) \| `$typography-` \| `typography.` \|
		When everything looks good, [open a PR](./pulls) and a member of the front-end team can review.

		### ⚛️ Components
		### 🚠 How do I hook more things up to Figma?

		\| Component \| Description \|
		\| :---------------------- \| :-------------------------------------------------------------- \|
		\| `.Manifold__Button` \| Those Manifold buttons you know and love \|
		\| `.Manifold__Typography` \| Global typography styles to really lighten that copy/paste load \|
		To understand the Figma updates, you’ll need to think in terms of transformers and targets.

		### 🚺 Icons
		We currently have the following transformers in Figma: `color`, `gradient`, `typography`, and
		`shadow`. Each of those transformers in the [`./figma/transformers`][local-transformers] directory
		map to a style namespace in Mercury. Each transformer takes the Figma REST API data (JSON), pulls
		out what it needs for each, and converts the end result to a JS object.

		Icons are all included in the [`icons/`][local-icons] folder as `.svg` files. You should be able to
		import these however you normally import files from npm. If using webpack, you may need to enable
		[raw-loader][raw-loader] for SVG files.
		After each transformer has generated its own object, each target is responsible for taking that
		collection and converting it to a file output. Currently we have 2 targets: JS and Sass.
		Each of those map to a file in [`./figma/targets`][local-targets]. The JS target is the simplest, as
		it basically writes the object as-is from transformers. The Sass target has to do a little more
		work, converting JS (`{ fontSize: '12px' }`) to CSS strings (`font-size: 12px;`), as well as
		generating some wrappers (`@mixin Manifold__Typography { … }`). But overall, it’s not too much work.

		## Contributing
		_OK, but how do I add something?_ Your process from here will be somewhat trial-and-error, because
		every “thing” you want to add will follow a different process (compare the `color` vs `typography`
		transformers to see that they do different things). But your best helpers will be [The Figma REST
		docs][figma-docs] to understand the data, as well as browsing [an export of the Figma JSON for
		Manifold][figma-gist] to see what structure the API is returning (tip: save your own local copy of
		the REST data if it’s changed drastically from that Gist).

		### 📚 Running Storybook Locally
		In short: your goal is to trawl through the meta and files JSON that Figma provides, and
		pull out what you need into a JS object (transformers) that can be exported to JS and Sass
		(targets). Reach out to Drew if you need help.

		### ♻️ Updating from Figma

		Updating from Figma happens ✨ _automatically_ ✨ with a daily check and Pull Requests. However, if
		you want to manually update (perhaps if you’re adding something), [create a Figma
		token][figma-docs-tokens] and add a new line to your `~/.zshrc` or `~/.bashrc` (whichever exists on
		your machine; most likely the former):

		```
		npm run dev
		export FIGMA_TOKEN=[token]
		```

		### ♻️ Updating from Figma
		Then from your terminal, run `npm run extract` (be sure to open a new terminal window if you just
		added that token).

		Updating from Figma happens ✨ _automatically_ ✨ with a daily check and Pull Requests. However, if
		you want to manually try it, add `export FIGMA_TOKEN=[token]` to your `~/.zshrc` or `~/.bashrc` and
		run `npm run extract`.

		### 🚀 Deploying to npm
		@@ -90,3 +97,3 @@

		In order to release versions yourself, you’ll have to do so manually, locally:
		In order to release versions yourself, you’ll have to do so manually. Locally, run:

		@@ -97,3 +104,3 @@ ```

		Then update `version` in `pkg/package.json` manually with your desired version.
		Then update `version` in `pkg/package.json` manually with your desired version:

		@@ -104,6 +111,12 @@ ```

		[figma]: https://www.figma.com/developers/api#access-tokens
		[figma-docs]: https://www.figma.com/developers/api
		[figma-docs-tokens]: https://www.figma.com/developers/api#access-tokens
		[figma-gist]: https://gist.github.com/dangodev/881ef0e9bc426579caba44d0c680ae7a
		[local-components]: ./src/components
		[local-icons]: ./src/icons
		[local-releases]: ./releases
		[local-scss]: ./src
		[local-targets]: ./figma/targets
		[local-transformers]: ./figma/transformers
		[manifold-css]: https://app.gitbook.com/@manifold/s/engineering/codebases/ui/css-styleguide/
		[node]: https://nodejs.org
		@@ -110,0 +123,0 @@ [raw-loader]: https://github.com/webpack-contrib/raw-loader

components/_button.scss