feat: add styled-components.md cheatsheet.

README.md

@@ -20,6 +20,7 @@ Quick Reference
 [JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
 [JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
 [React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
+[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
 [TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
 [Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
 [TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->

docs/docker.md

@@ -25,12 +25,13 @@ $ docker run -d -p 80:80 docker/getting-started
 在前台创建并运行容器
 
 ```shell
-$ docker run -it -p 8001:8080 --name my-nginx nginx
+$ docker run -it -p --rm 8001:8080 --name my-nginx nginx
 ```
 
 ----
 
 - `-it` - 交互式 bash 模式
+- `--rm` - 容器终止运行后自动删除容器文件
 - `-p 8001:8080` - 将 `8001` 端口映射到容器中的 `8080` 端口
 - `--name my-nginx` - 指定名称
 - `nginx` - 要使用的镜像

docs/jest.md

@@ -63,8 +63,6 @@ describe('My work', () => {
 })
 ```
 
-
-
 ### 测试结构
 <!--rehype:wrap-class=col-span-3 row-span-2-->
 
@@ -135,6 +133,97 @@ expect(value).toThrow(error)
   .toThrowErrorMatchingSnapshot()
 ```
 
+### 快照
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toMatchSnapshot()
+  .toMatchInlineSnapshot()
+```
+
+### Errors
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toThrow(error)
+  .toThrowErrorMatchingSnapshot()
+```
+
+### Objects
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeInstanceOf(Class)
+  .toMatchObject(object)
+  .toHaveProperty(keyPath, value)
+```
+
+### Objects
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toContain(item)
+  .toContainEqual(item)
+  .toHaveLength(number)
+```
+
+### Numbers
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeCloseTo(number, numDigits)
+  .toBeGreaterThan(number)
+  .toBeGreaterThanOrEqual(number)
+  .toBeLessThan(number)
+  .toBeLessThanOrEqual(number)
+```
+
+### Booleans
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeFalsy()
+  .toBeNull()
+  .toBeTruthy()
+  .toBeUndefined()
+  .toBeDefined()
+```
+
+### Strings
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toMatch(regexpOrString)
+```
+
+### NaN
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+test('当值为 NaN 时通过', () => {
+  expect(NaN).toBeNaN();
+  expect(1).not.toBeNaN();
+});
+```
+
+### Others
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect.extend(matchers)
+expect.any(constructor)
+expect.addSnapshotSerializer(serializer)
+
+expect.assertions(1)
+```
+
 匹配器
 ----
 
@@ -388,8 +477,6 @@ expect(fn).toThrowErrorMatchingSnapshot()
 ### 实例
 <!--rehype:wrap-class=row-span-2-->
 
-请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)。
-
 在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。
 
 ```js
@@ -409,6 +496,7 @@ beforeEach(expect.hasAssertions)
 ```
 
 这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 `expect.assertions(3)` 声明配合使用。
+请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)
 
 ### async/await
 
@@ -432,8 +520,8 @@ test('async test', (done) => {
 
   setTimeout(() => {
     try {
-      const result = getAsyncOperationResult()
-      expect(result).toBe(true)
+      const res = getAsyncOperatResult()
+      expect(res).toBe(true)
       done()
     } catch (err) {
       done.fail(err)
@@ -469,18 +557,28 @@ test('call the callback', () => {
   const callback = jest.fn()
   fn(callback)
   expect(callback).toBeCalled()
-  expect(callback.mock.calls[0][1].baz).toBe('pizza') // 第一次调用的第二个参数
+  expect(callback.mock.calls[0][1].baz)
+    .toBe('pizza') // 第一次调用的第二个参数
+
   // 匹配第一个和最后一个参数，但忽略第二个参数
-  expect(callback).toHaveBeenLastCalledWith('meal', expect.anything(), 'margarita')
+  expect(callback)
+    .toHaveBeenLastCalledWith(
+      'meal',
+      expect.anything(),
+      'margarita'
+    )
 })
 ```
+<!--rehype:className=wrap-text -->
 
 您还可以使用快照：
 
 ```js
 test('call the callback', () => {
   // mockName 在 Jest 22+ 中可用
-  const callback = jest.fn().mockName('Unicorn') 
+  const callback = jest.fn()
+    .mockName('Unicorn')
+
   fn(callback)
   expect(callback).toMatchSnapshot()
   // ->
@@ -506,33 +604,37 @@ const callback = jest.fn(() => true)
 ```js
 const callback
     = jest.fn().mockReturnValue(true)
+
 const callbackOnce
     = jest.fn().mockReturnValueOnce(true)
 ```
 
 或解析值：
 
 ```js
-const promise 
+const promise
     = jest.fn().mockResolvedValue(true)
-const promiseOnce 
+
+const promiseOnce
     = jest.fn().mockResolvedValueOnce(true)
 ```
 
 他们甚至可以拒绝值：
 
 ```js
-const failedPromise
-    = jest.fn().mockRejectedValue('Error')
-const failedPromiseOnce
-    = jest.fn().mockRejectedValueOnce('Error')
+const failedPromise =
+  jest.fn().mockRejectedValue('Error')
+
+const failedPromiseOnce =
+  jest.fn().mockRejectedValueOnce('Error')
 ```
 
 你甚至可以结合这些：
 
 ```js
-const callback
-    = jest.fn().mockReturnValueOnce(false).mockReturnValue(true)
+const callback = jest.fn()
+        .mockReturnValueOnce(false)
+        .mockReturnValue(true)
 // ->
 //  call 1: false
 //  call 2+: true
@@ -541,13 +643,20 @@ const callback
 ### 使用 `jest.mock` 方法模拟模块
 
 ```js
-jest.mock('lodash/memoize', () => (a) => a) // The original lodash/memoize should exist
-jest.mock('lodash/memoize', () => (a) => a, { virtual: true }) // The original lodash/memoize isn’t required
+// 原来的 lodash/memoize 应该存在
+jest.mock(
+  'lodash/memoize',
+  () => (a) => a
+)
+// 不需要原始的 lodash/memoize
+jest.mock(
+  'lodash/memoize',
+  () => (a) => a,
+  { virtual: true }
+)
 ```
 
-[jest.mock docs](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options)
-
-> 注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
+注意：当使用 `babel-jest` 时，对 [`jest.mock`](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options) 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
 
 ### 使用模拟文件模拟模块
 
@@ -563,22 +672,18 @@ module.exports = (a) => a
 jest.mock('lodash/memoize')
 ```
 
-注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
-
-[手动模拟文档](https://jestjs.io/docs/en/manual-mocks)
-
-### 模拟对象方法
+注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。[手动模拟文档](https://jestjs.io/docs/en/manual-mocks)
 
-```js
-const spy = jest.spyOn(console, 'log').mockImplementation(() => {})
-expect(console.log.mock.calls).toEqual([['dope'], ['nope']])
-spy.mockRestore()
-```
+### 模拟 getters 和 setters
 
 ```js
-const spy = jest.spyOn(ajax, 'request').mockImplementation(() => Promise.resolve({ success: true }))
-expect(spy).toHaveBeenCalled()
-spy.mockRestore()
+const getTitle = jest.fn(() => 'pizza')
+const setTitle = jest.fn()
+const location = {}
+Object.defineProperty(location, 'title', {
+  get: getTitle,
+  set: setTitle,
+})
 ```
 
 ### 模拟 getter 和 setter (Jest 22.1.0+)
@@ -603,8 +708,9 @@ const setTitle = jest
 jest.useFakeTimers()
 test('kill the time', () => {
   const callback = jest.fn()
-  // 运行一些使用 setTimeout 或 setInterval 的代码
-  const actual = someFunctionThatUseTimers(callback)
+  // 运行使用 setTimeout或setInterval 的代码
+  const actual 
+    = someFunctionThatUseTimers(callback)
   // 快进直到所有定时器都执行完毕
   jest.runAllTimers()
   // 同步检查结果
@@ -619,29 +725,39 @@ test('kill the time', () => {
 jest.useFakeTimers()
 test('kill the time', () => {
   const callback = jest.fn()
-  // 运行一些使用 setTimeout 或 setInterval 的代码
-  const actual = someFunctionThatUseTimers(callback)
+  // 运行使用 setTimeout或setInterval 的代码
+  const actual 
+    = someFunctionThatUseTimers(callback)
   // 快进 250 毫秒
   jest.advanceTimersByTime(250)
   // 同步检查结果
   expect(callback).toHaveBeenCalledTimes(1)
 })
 ```
 
-对于特殊情况，请使用 [jest.runOnlyPendingTimers()](https://jestjs.io/docs/en/timer-mocks#run-pending-timers)。
+> 对于特殊情况，请使用 [jest.runOnlyPendingTimers()](https://jestjs.io/docs/en/timer-mocks#run-pending-timers)。
 
 **注意：** 您应该在测试用例中调用 `jest.useFakeTimers()` 以使用其他假计时器方法。
 
-### 模拟 getters 和 setters
+### 模拟对象方法
 
 ```js
-const getTitle = jest.fn(() => 'pizza')
-const setTitle = jest.fn()
-const location = {}
-Object.defineProperty(location, 'title', {
-  get: getTitle,
-  set: setTitle,
-})
+const spy = jest.spyOn(console, 'log')
+  .mockImplementation(() => {})
+
+expect(console.log.mock.calls)
+  .toEqual([['dope'], ['nope']])
+spy.mockRestore()
+```
+
+```js
+const spy = jest.spyOn(ajax, 'request')
+  .mockImplementation(
+    () => Promise.resolve({success: true})
+  )
+
+expect(spy).toHaveBeenCalled()
+spy.mockRestore()
 ```
 
 ### 清除和恢复模拟
@@ -653,8 +769,10 @@ Object.defineProperty(location, 'title', {
 // 清除模拟使用日期
 // （fn.mock.calls、fn.mock.instances）
 fn.mockClear()
+
 // 清除并删除任何模拟的返回值或实现
 fn.mockReset()
+
 // 重置并恢复初始实现
 fn.mockRestore()
 ```

docs/package.json.md

@@ -101,7 +101,7 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 
 鼓励使用开源 [(OSI-approved)](https://opensource.org/licenses/alphabetical) 许可证，除非你有特别的原因不用它。 如果你开发的包是你工作的一部分，最好和公司讨论后再做决定。
 
-**license字段必须是以下之一:**
+#### **license字段必须是以下之一**
 
 - 如果你使用标准的许可证，需要一个有效地 [SPDX 许可证标识](https://spdx.org/licenses/)。
 - 如果你用多种标准许可证，需要有效的 [SPDX 许可证表达式2.0语法表达式](https://www.npmjs.com/package/spdx)。