Setup new primer-primitive bundle (#2078)

* bump

* add index

* add storybook support

* gatsby import

* Create itchy-wasps-refuse.md

.changeset/itchy-wasps-refuse.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Setup new `primer-primitive` bundle

docs/.storybook/main.js

@@ -8,5 +8,9 @@ module.exports = {
     '@whitespace/storybook-addon-html',
     'storybook-addon-designs',
     'storybook-color-picker'
-  ]
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5'
+  }
 }

docs/.storybook/preview.js

@@ -2,6 +2,17 @@ import '../../src/docs.scss'
 import '../../src/index.scss'
 import '../../src/base/index.scss'
 import '../src/stories/helpers/storybook-styles.scss'
+// temporary import until primitives moves to core bundle
+// importing the index from /css didn't play nice with Storybook
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css'
 import renderToHTML from '../src/stories/helpers/code-snippet-html-helper'
 
 const customViewports = {

docs/gatsby-browser.js

@@ -0,0 +1,11 @@
+// temporary import until primitives moves to core bundle
+// importing the index from /css didn't play nice with Gatsby
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css'

docs/package.json

@@ -15,7 +15,7 @@
     "@primer/gatsby-theme-doctocat": "3.1.1",
     "@primer/octicons": "17.0.0",
     "@primer/octicons-react": "17.0.0",
-    "@primer/primitives": "7.3.0",
+    "@primer/primitives": "7.8.3",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.4.2",
     "babel-preset-gatsby": "^2.11.1",
@@ -47,16 +47,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
-    "@storybook/addon-a11y": "6.4.19",
-    "@storybook/addon-actions": "^6.4.12",
-    "@storybook/addon-essentials": "^6.4.12",
-    "@storybook/addon-links": "^6.4.12",
+    "@storybook/addon-a11y": "6.5.0",
+    "@storybook/addon-actions": "^6.5.0",
+    "@storybook/addon-essentials": "^6.5.0",
+    "@storybook/addon-links": "^6.5.0",
     "@storybook/addon-postcss": "2.0.0",
+    "@storybook/builder-webpack5": "^6.5.0",
+    "@storybook/manager-webpack5": "^6.5.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "6.4.19",
+    "@storybook/react": "6.5.0",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "babel-loader": "^8.2.3",
     "storybook-addon-designs": "6.2.1",
-    "storybook-color-picker": "2.3.0"
+    "storybook-color-picker": "2.3.1"
   }
 }

package.json

@@ -41,7 +41,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.7.0"
+    "@primer/primitives": "^7.8.3"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.4",

src/primitives/index.scss

@@ -0,0 +1,9 @@
+@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
+@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';

yarn.lock

@@ -1162,7 +1162,7 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@primer/primitives@^7.7.0":
+"@primer/primitives@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.8.3.tgz#de7e03492cf977e99f2417490d76421db9715e9f"
   integrity sha512-04ZwfJhpZ0QFwDrJfCuLX6iOh0BflWDTvuoRA80lQH9xk0RtIg16INbruwwtnbSgnKKXXRSykRRJ5BbxnqufRA==