Merge branch 'main' of ssh://github.com/pixiv/charcoal into feat/remo…

…ve-charcoal-style-from-checkbox

.github/workflows/test.yml

@@ -44,7 +44,9 @@ jobs:
           cache: yarn
 
       - run: yarn install --immutable --inline-builds
-      - run: yarn test
+      - run: |
+          yarn test
+          yarn storyshots
         env:
           CI: 'true'
 

.node-version

@@ -1 +1 @@
-16.19.0
+18.17.1

.storybook/main.js

@@ -4,7 +4,7 @@ const glob = promisify(require('glob'))
 const { viteCommonjs } = require('@originjs/vite-plugin-commonjs')
 
 module.exports = {
-  stories: ['../packages/**/*.story.@(tsx|mdx)'],
+  stories: ['../packages/**/*.mdx', '../packages/**/*.story.@(tsx)'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
@@ -15,6 +15,9 @@ module.exports = {
     {
       name: '@storybook/addon-styling',
       options: {
+        postCss: {
+          implementation: require.resolve('postcss'),
+        },
         postcssLoaderOptions: {
           postcssOptions: {
             config: path.resolve(__dirname, 'postcss.config.js'),

.storybook/theme-decorator.tsx

@@ -26,6 +26,7 @@ const Theme = ({ children }) => {
           [themeSelector('dark')]: dark,
           [themeSelector('light')]: light,
         }}
+        background="background1"
       ></TokenInjector>
     </ThemeProvider>
   )

__mocks__/file.ts

@@ -0,0 +1,3 @@
+const file = 'test-file-stub'
+
+export default file

__mocks__/mdx.ts

@@ -0,0 +1 @@
+export default ''

__mocks__/style.ts

@@ -0,0 +1 @@
+export default {}

docs/src/pages/@charcoal-ui/react/Checkbox/sections.tsx

@@ -43,4 +43,25 @@ export const sections: PreviewSection<CheckboxProps>[] = [
       },
     ],
   },
+  {
+    title: 'invalid',
+    previewMetas: [
+      {
+        children: 'invalid',
+        props: {
+          children: undefined,
+          invalid: true,
+          checked: false,
+        },
+      },
+      {
+        children: 'invalid',
+        props: {
+          children: undefined,
+          invalid: true,
+          checked: true,
+        },
+      },
+    ],
+  },
 ]

docs/yarn.lock

@@ -162,38 +162,38 @@ __metadata:
   linkType: hard
 
 "@charcoal-ui/foundation@file:../packages/foundation::locator=charcoal-web-docs%40workspace%3A.":
-  version: 3.3.0-beta.0
-  resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=20ac71&locator=charcoal-web-docs%40workspace%3A."
-  checksum: caa7cd8dd3d0da231bd4f2f4bd572e85271d929e4cc87178e4de94b788d960e2e99979090c0f1e781f9145e9ef898d67c75d618f860f076edd1c51cb050ff25f
+  version: 3.5.0
+  resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=c11567&locator=charcoal-web-docs%40workspace%3A."
+  checksum: 4895ab4e2195eac379a42de481f1e3e6263d5c575335a94dc70df826bb4133e809e7406bdd7dcf17044e9199c8bbd564e27f49b640427acfcf09b544f62edeee
   languageName: node
   linkType: hard
 
 "@charcoal-ui/icon-files@file:../packages/icon-files::locator=charcoal-web-docs%40workspace%3A.":
-  version: 3.3.0-beta.0
-  resolution: "@charcoal-ui/icon-files@file:../packages/icon-files#../packages/icon-files::hash=d8f2a0&locator=charcoal-web-docs%40workspace%3A."
-  checksum: d5c66986fbf41ba3f1c2f2e34439ca5f081cca2c3d03a2d6682a132bcbe0264f85eb139a24cce28a849dca5b0488e1fe1ee3ebe64821f45adf7d5b295871f912
+  version: 3.5.0
+  resolution: "@charcoal-ui/icon-files@file:../packages/icon-files#../packages/icon-files::hash=0fe403&locator=charcoal-web-docs%40workspace%3A."
+  checksum: da1ff991d8c383dc468c27fefca44ec8b0c2736921cc70170ce4c01a1b37f47dca1922e6528aee9646838da9ed21f87aa77062b59f4b36f0ab180bab2d0b5083
   languageName: node
   linkType: hard
 
 "@charcoal-ui/icons@file:../packages/icons::locator=charcoal-web-docs%40workspace%3A.":
-  version: 3.3.0-beta.0
-  resolution: "@charcoal-ui/icons@file:../packages/icons#../packages/icons::hash=2135a7&locator=charcoal-web-docs%40workspace%3A."
+  version: 3.5.0
+  resolution: "@charcoal-ui/icons@file:../packages/icons#../packages/icons::hash=79ab8e&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/icon-files": ^3.3.0-beta.0
+    "@charcoal-ui/icon-files": ^3.5.0
     dompurify: ^2.3.6
     warning: ^4.0.3
-  checksum: adfcc7b8da8ddf01a046583b7043dce8587c53f06170b3178500c33b9693dcaf5b5681289a57ae04e1b695b9de50119160ce774a4f3a1256c228761569fee3f5
+  checksum: b50dd7feb495afadf351ba64900ea3a91e13d172dc5858e43d4b7f74d40869d850d3fcdbad1b62439897a249c11bfe7d12d068e85d04ee9e3adc4dc5fa86c6e4
   languageName: node
   linkType: hard
 
 "@charcoal-ui/react@file:../packages/react::locator=charcoal-web-docs%40workspace%3A.":
-  version: 3.3.0-beta.0
-  resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=dd5f8e&locator=charcoal-web-docs%40workspace%3A."
+  version: 3.5.0
+  resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=7eb46f&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/icons": ^3.3.0-beta.0
-    "@charcoal-ui/styled": ^3.3.0-beta.0
-    "@charcoal-ui/theme": ^3.3.0-beta.0
-    "@charcoal-ui/utils": ^3.3.0-beta.0
+    "@charcoal-ui/icons": ^3.5.0
+    "@charcoal-ui/styled": ^3.5.0
+    "@charcoal-ui/theme": ^3.5.0
+    "@charcoal-ui/utils": ^3.5.0
     "@react-aria/button": ^3.7.0
     "@react-aria/checkbox": ^3.11.0
     "@react-aria/dialog": ^3.5.0
@@ -215,43 +215,43 @@ __metadata:
   peerDependencies:
     react: ">=17.0.0"
     styled-components: ">=5.1.1"
-  checksum: 76aea99c06954c41729d1f95a1b687bd42e165ed0544ed79e01a0dd32e1918873aaa9a95c775cb6b634524058e158f3fd409888cdc13c076e3e8134c99069f20
+  checksum: ddecfdefc4964c0d388bea4a8a9d278a5bcaa4b95c9c9bba936dc13d491d9876f48c97b40a0596a7e2f4b0b81677afe1246686ed631ef5068bae67f1f77a2f83
   languageName: node
   linkType: hard
 
 "@charcoal-ui/styled@file:../packages/styled::locator=charcoal-web-docs%40workspace%3A.":
-  version: 3.3.0-beta.0
-  resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=051221&locator=charcoal-web-docs%40workspace%3A."
+  version: 3.5.0
+  resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=da1c29&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/foundation": ^3.3.0-beta.0
-    "@charcoal-ui/theme": ^3.3.0-beta.0
-    "@charcoal-ui/utils": ^3.3.0-beta.0
+    "@charcoal-ui/foundation": ^3.5.0
+    "@charcoal-ui/theme": ^3.5.0
+    "@charcoal-ui/utils": ^3.5.0
     warning: ^4.0.3
   peerDependencies:
     react: ">=17.0.0"
     styled-components: ">=5.1.1"
-  checksum: f16403e1e3230ad8ab71969746a6509697d65745fc3d7e9dda328cc3fc86df247fc37e882a50bd59f85cfa4b2e3fe05c2486da9aa722bc1a5401fb927d8fefd9
+  checksum: 96c9716055c8ab3ee2993d44070f12445ea16e8dcc2aaa363e846eae1bdec1cd0d85df20cb7cc92cd37797d332600c29f51e45e63734865cd49170817a813184
   languageName: node
   linkType: hard
 
 "@charcoal-ui/theme@file:../packages/theme::locator=charcoal-web-docs%40workspace%3A.":
-  version: 3.3.0-beta.0
-  resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=209188&locator=charcoal-web-docs%40workspace%3A."
+  version: 3.5.0
+  resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=aef8a0&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/foundation": ^3.3.0-beta.0
-    "@charcoal-ui/utils": ^3.3.0-beta.0
+    "@charcoal-ui/foundation": ^3.5.0
+    "@charcoal-ui/utils": ^3.5.0
     polished: ^4.1.4
-  checksum: eb6373c38a1d5ebe66bf3c1a1017152ced38b3bd76681c545f5ec75927a8aede90428114eedb82a0b75fe5b0c542fe40a0ee96e82f569e9233af2be608401c9f
+  checksum: b1f1193482f82722d6296b633713a9a427eb4b922d08b37f3518346ee98563626d3edb39a268aa064c0b110c573d5054d9585ca745af79c2d21f1d2ee4d63791
   languageName: node
   linkType: hard
 
 "@charcoal-ui/utils@file:../packages/utils::locator=charcoal-web-docs%40workspace%3A.":
-  version: 3.3.0-beta.0
-  resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=fe489f&locator=charcoal-web-docs%40workspace%3A."
+  version: 3.5.0
+  resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=f357d2&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/foundation": ^3.3.0-beta.0
+    "@charcoal-ui/foundation": ^3.5.0
     polished: ^4.1.4
-  checksum: 01eb2b8969afe3487dfe2be3140650141398d32e01ce115ea06ff2a564d614b3b4ea7649a698dd4b4a58a3be19f6359c4e040a6f4367daf041be346f1fd831e8
+  checksum: c68e0c167ccffcd378409e9a5b7473592848e4fb42872d7be231a7a1810d389b65da432da7c9f32c593ae5a5d6dad5d4d72c123d90d1dae075414e9f0501ad3d
   languageName: node
   linkType: hard
 

jest.setup.ts

@@ -1,7 +1,30 @@
+import type { ReactNode } from 'react'
+
 export {}
 
 globalThis.ResizeObserver = jest.fn().mockImplementation(() => ({
   observe: jest.fn(),
   unobserve: jest.fn(),
   disconnect: jest.fn(),
 }))
+
+window.matchMedia = jest.fn().mockImplementation((query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: jest.fn(),
+  removeListener: jest.fn(),
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  dispatchEvent: jest.fn(),
+}))
+
+jest.mock('@react-aria/utils', () => ({
+  ...jest.requireActual('@react-aria/utils'),
+  useId: () => 'test-id',
+}))
+
+jest.mock('@react-aria/overlays', () => ({
+  ...jest.requireActual('@react-aria/overlays'),
+  Overlay: jest.fn(({ children }: { children: ReactNode }) => children),
+}))

lerna.json

@@ -86,5 +86,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "3.3.0-beta.0"
+  "version": "3.5.0"
 }

package.json

@@ -15,6 +15,7 @@
     "build": "yarn workspaces foreach -vpt -j unlimited run build",
     "clean": "yarn workspaces foreach -vp run clean",
     "test": "jest",
+    "storyshots": "jest -c storyshots.config.mjs",
     "test:strict": "USE_STRICT=1 jest",
     "typecheck": "yarn workspaces foreach -vp run typecheck",
     "typecheck:config": "tsc",
@@ -41,13 +42,15 @@
     "@commitlint/config-lerna-scopes": "^16.0.0",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@storybook/addon-a11y": "^7.4.1",
+    "@storybook/addon-docs": "^7.5.1",
     "@storybook/addon-essentials": "^7.4.1",
     "@storybook/addon-interactions": "^7.4.1",
-    "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-links": "^7.4.1",
     "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-storyshots": "7.4.1",
     "@storybook/addon-storysource": "^7.4.1",
     "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^0.0.5",
     "@storybook/blocks": "^7.4.1",
     "@storybook/builder-vite": "^7.4.1",
     "@storybook/builder-webpack5": "^7.4.1",
@@ -64,6 +67,7 @@
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
+    "autoprefixer": "^10.4.16",
     "conventional-changelog-conventionalcommits": "^4.6.3",
     "esbuild": "^0.14.14",
     "esbuild-jest": "^0.5.0",
@@ -83,6 +87,7 @@
     "prettier": "^2.8.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-test-renderer": "17.0.2",
     "storybook": "^7.4.1",
     "storybook-dark-mode": "^3.0.1",
     "styled-components": "^5.3.3",
@@ -101,5 +106,8 @@
       "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
     }
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "react-test-renderer": "17.0.2"
+  }
 }

packages/foundation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/foundation",
-  "version": "3.3.0-beta.0",
+  "version": "3.5.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",

packages/icon-files/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icon-files",
-  "version": "3.3.0-beta.0",
+  "version": "3.5.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./src/index.cjs",

packages/icon-files/src/index.cjs

@@ -2,6 +2,7 @@
 
 module.exports = {
   '16/Add': () => import('./16/Add.js').then(m => m.default),
+  '16/Archive': () => import('./16/Archive.js').then(m => m.default),
   '16/ArrowDown': () => import('./16/ArrowDown.js').then(m => m.default),
   '16/Artwork': () => import('./16/Artwork.js').then(m => m.default),
   '16/Back': () => import('./16/Back.js').then(m => m.default),
@@ -18,6 +19,7 @@ module.exports = {
   '16/Like': () => import('./16/Like.js').then(m => m.default),
   '16/Menu': () => import('./16/Menu.js').then(m => m.default),
   '16/More': () => import('./16/More.js').then(m => m.default),
+  '16/Nextworks': () => import('./16/Nextworks.js').then(m => m.default),
   '16/Pencil': () => import('./16/Pencil.js').then(m => m.default),
   '16/Question': () => import('./16/Question.js').then(m => m.default),
   '16/Ranking': () => import('./16/Ranking.js').then(m => m.default),

packages/icon-files/src/index.d.ts

@@ -2,6 +2,7 @@
 
 declare var _default: {
   '16/Add': () => Promise<string>;
+  '16/Archive': () => Promise<string>;
   '16/ArrowDown': () => Promise<string>;
   '16/Artwork': () => Promise<string>;
   '16/Back': () => Promise<string>;
@@ -18,6 +19,7 @@ declare var _default: {
   '16/Like': () => Promise<string>;
   '16/Menu': () => Promise<string>;
   '16/More': () => Promise<string>;
+  '16/Nextworks': () => Promise<string>;
   '16/Pencil': () => Promise<string>;
   '16/Question': () => Promise<string>;
   '16/Ranking': () => Promise<string>;

packages/icon-files/src/index.js

@@ -2,6 +2,7 @@
 
 export default {
   '16/Add': () => import('./16/Add.js').then(m => m.default),
+  '16/Archive': () => import('./16/Archive.js').then(m => m.default),
   '16/ArrowDown': () => import('./16/ArrowDown.js').then(m => m.default),
   '16/Artwork': () => import('./16/Artwork.js').then(m => m.default),
   '16/Back': () => import('./16/Back.js').then(m => m.default),
@@ -18,6 +19,7 @@ export default {
   '16/Like': () => import('./16/Like.js').then(m => m.default),
   '16/Menu': () => import('./16/Menu.js').then(m => m.default),
   '16/More': () => import('./16/More.js').then(m => m.default),
+  '16/Nextworks': () => import('./16/Nextworks.js').then(m => m.default),
   '16/Pencil': () => import('./16/Pencil.js').then(m => m.default),
   '16/Question': () => import('./16/Question.js').then(m => m.default),
   '16/Ranking': () => import('./16/Ranking.js').then(m => m.default),

packages/icons-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons-cli",
-  "version": "3.3.0-beta.0",
+  "version": "3.5.0",
   "license": "Apache-2.0",
   "bin": "./dist/index.js",
   "scripts": {

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons",
-  "version": "3.3.0-beta.0",
+  "version": "3.5.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -30,7 +30,7 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icon-files": "^3.3.0-beta.0",
+    "@charcoal-ui/icon-files": "^3.5.0",
     "dompurify": "^2.3.6",
     "warning": "^4.0.3"
   },