Compile to JS library

.github/workflows/integration.yaml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - name: Install dependencies
         run: yarn --frozen-lockfile
-      - name: Build project
+      - name: Build library
         run: yarn build
   test:
     needs: build

.github/workflows/pr.yaml

@@ -15,6 +15,8 @@ jobs:
           node-version: "16"
       - name: Install dependencies
         run: yarn install --frozen-lockfile
+      - name: Build project
+        run: yarn build
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         with:

.github/workflows/release.yaml

@@ -12,6 +12,8 @@ jobs:
       - uses: actions/checkout@v2
       - name: Install dependencies
         run: yarn --frozen-lockfile
+      - name: Build library
+        run: yarn build
       - name: Release to GHPR
         run: yarn publish
         env:

.github/workflows/storybook.yaml

@@ -14,7 +14,7 @@ jobs:
       - name: Install dependencies
         run: yarn
       - name: Build Storybook
-        run: yarn build
+        run: yarn build:storybook
       - name: Deploy to GitHub Pages
         uses: JamesIves/[email protected]
         with:

.gitignore

@@ -25,4 +25,5 @@ chrome-user-data
 *.swp
 *.swo
 storybook-static
-.envrc
+.envrc
+dist/

.storybook/tsconfig.json

@@ -9,5 +9,5 @@
   "include": [
     "../**/*",
     "*.js"
-  ],
+  ]
 }

package.json

@@ -1,8 +1,12 @@
 {
   "name": "@gameflow-tv/flume",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "React implementation of the Flume design system",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
   "repository": "git://github.com/gameflow-tv/flume.git",
   "author": "[email protected]",
   "publishConfig": {
@@ -15,12 +19,13 @@
   },
   "scripts": {
     "format": "prettier --write \"./src/**/*.{ts,tsx,js,jsx,mdx,json}\" --config .prettierrc",
-    "build": "build-storybook -o storybook-static",
-    "storybook": "start-storybook -p 9009 -s ./public",
+    "build:storybook": "build-storybook -o storybook-static",
+    "serve:storybook": "start-storybook -p 9009 -s ./public",
     "prepare": "husky install",
     "test": "jest",
     "coverage": "jest --coverage",
-    "chromatic": "npx chromatic"
+    "chromatic": "npx chromatic",
+    "build": "tsc"
   },
   "husky": {
     "hooks": {
@@ -33,7 +38,7 @@
     "@fortawesome/pro-light-svg-icons": "^5.15.3",
     "@fortawesome/pro-regular-svg-icons": "^5.15.3",
     "@fortawesome/pro-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -43,34 +48,34 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-a11y": "^6.3.2",
-    "@storybook/addon-backgrounds": "^6.3.2",
+    "@storybook/addon-a11y": "^6.3.6",
+    "@storybook/addon-backgrounds": "^6.3.6",
     "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-controls": "^6.3.2",
-    "@storybook/addon-docs": "^6.3.2",
-    "@storybook/addon-essentials": "^6.3.2",
+    "@storybook/addon-controls": "^6.3.6",
+    "@storybook/addon-docs": "^6.3.6",
+    "@storybook/addon-essentials": "^6.3.6",
     "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-storysource": "^6.3.2",
-    "@storybook/react": "^6.3.2",
-    "@storybook/theming": "^6.3.2",
+    "@storybook/addon-storysource": "^6.3.6",
+    "@storybook/react": "^6.3.6",
+    "@storybook/theming": "^6.3.6",
     "@types/chroma-js": "^2.1.3",
-    "@types/jest": "^26.0.23",
-    "@types/lodash": "^4.14.170",
-    "@types/node": "15.12.5",
-    "@types/react": "17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "@types/styled-components": "^5.1.10",
+    "@types/jest": "^26.0.24",
+    "@types/lodash": "^4.14.172",
+    "@types/node": "16.4.11",
+    "@types/react": "^17.0.15",
+    "@types/react-dom": "^17.0.9",
+    "@types/styled-components": "^5.1.11",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.2.2",
     "chromatic": "^5.9.2",
-    "eslint-plugin-mdx": "^1.13.0",
-    "husky": "^6.0.0",
+    "eslint-plugin-mdx": "^1.14.1",
+    "husky": "^7.0.1",
     "jest": "^27.0.6",
-    "mocha": "^9.0.1",
+    "mocha": "^9.0.3",
     "prettier": "^2.3.2",
     "react-docgen-typescript-loader": "^3.7.2",
-    "storybook": "^6.3.2",
-    "ts-jest": "^27.0.3",
-    "typescript": "^4.3.4"
+    "storybook": "^6.3.6",
+    "ts-jest": "^27.0.4",
+    "typescript": "^4.3.5"
   }
 }

src/lib/theme/index.ts

@@ -9,3 +9,11 @@ export * from './typography'
 export * from './transitions'
 export * from './ThemeProvider'
 export * from './units'
+
+// Types
+export type { Theme } from './theme'
+export type { Shadows } from './shadows'
+export type { Colors } from './colors'
+export type { Shapes, Borders } from './shapes'
+export type { Breakpoints } from './breakpoints'
+export type { Typography, TypographyStyle } from './typography'

tsconfig.json

@@ -1,28 +1,26 @@
 {
-  "files": [],
-  "include": [],
+  "include": [
+    "src/**/*"
+  ],
   "compilerOptions": {
     "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
+    "declaration": true,
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
+    "noEmit": false,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-  },
-  "references": [
-    {
-      "path": "./.storybook/tsconfig.json"
-    }
-  ]
+    "outDir": "./dist"
+  }
 }