Convert mixins to TypeScript

Author: Andrey Okonetchnikov

package.json

@@ -52,6 +52,7 @@
     "react-dom": "^16.13.0",
     "react-styleguidist": "^11.0.0",
     "read-pkg-up": "^7.0.1",
+    "typescript": "^4.3.2",
     "webpack": "^4.16.5"
   },
   "lint-staged": {

packages/mixins/package.json

@@ -7,12 +7,21 @@
   "dependencies": {
     "@component-driven/with-selector": "*",
     "@theme-ui/color": "^0.3.1",
-    "focus-visible": "^5.0.2"
+    "focus-visible": "^5.0.2",
+    "styled-system": "^5.1.5",
+    "@styled-system/css": "^5.1.5"
   },
   "peerDependencies": {
     "react": ">=16.0",
     "react-dom": ">=16.0"
   },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.3",
+    "@types/styled-system": "^5.1.10",
+    "@types/styled-system__css": "^5.0.13",
+    "@types/theme-ui": "^0.6.0",
+    "@types/theme-ui__color": "^0.3.2"
+  },
   "author": "Andrey Okonetchnikov <andrey@okonet.ru>",
   "license": "MIT",
   "publishConfig": {

packages/mixins/src/index.js

@@ -0,0 +1 @@
+export * from "./mixins"

packages/mixins/src/index.ts

@@ -0,0 +1,87 @@
+import { transparentize } from "@theme-ui/color"
+import { Theme } from "styled-system"
+import { CSSObject } from "@styled-system/css"
+
+// Check if it's a props object or the theme
+function getTheme(theme: object = {}): object {
+  // @ts-ignore theme-ui provides theme as an argument where styled-system uses props.theme
+  return theme["theme"] || theme
+}
+/**
+ * Mixin to generate consistent box-shadow rule for focus rings and selections
+ */
+export const focusBoxShadow =
+  (color: string) =>
+  (theme: Theme = {}): CSSObject => {
+    return {
+      boxShadow: `0 0 0 0.2em ${transparentize(color, 0.75)(getTheme(theme))}`
+    }
+  }
+
+/**
+ * Mixin to add an alternative focus ring to interactive elements.
+ * It removes the default focus outline.
+ *
+ * @example
+ * styled.div`
+ *   &:focus {
+ *     ${focusRingStyles('red')}
+ *   }
+ * `
+ */
+export const focusRingStyles =
+  (color: string, disabled: boolean = false) =>
+  (theme: Theme) => {
+    const themeColor = transparentize(color, 0)(getTheme(theme)) // This serves as a getter from theme
+    if (disabled) {
+      return {
+        outline: "none"
+      }
+    }
+    return {
+      outline: "none",
+      borderColor: themeColor,
+      transition: "box-shadow .25s",
+      ...focusBoxShadow(themeColor)(theme)
+    }
+  }
+
+/**
+ * Mixin to add an alternative focus styles.
+ * In addition to focusRingStyles mixin and adjust styles to use with focus-visible polyfill
+ *
+ * @example
+ * styled.div`
+ *   ${focusRing('red')}
+ * `
+ */
+export const focusRing =
+  (color: string, disabled = false, hover = false) =>
+  (theme: Theme) => {
+    const styles = focusRingStyles(color, disabled)(getTheme(theme))
+    const baseStyles = {
+      ".js-focus-visible &:focus:not(.focus-visible)": {
+        outline: 0
+      },
+      "&.focus-visible": styles
+    }
+    if (hover) {
+      return {
+        ...baseStyles,
+        "&:hover:not(:disabled)": styles
+      }
+    }
+    return baseStyles
+  }
+
+export const disabledStyles = {
+  opacity: "0.6",
+  filter: "saturate(60%)",
+  cursor: "not-allowed"
+}
+
+export function disabled() {
+  return {
+    "&:disabled": disabledStyles
+  }
+}

packages/mixins/src/mixins.js

@@ -33,23 +33,20 @@ module.exports = {
     Wrapper: file(".styleguidist/StyleguideProvider.tsx")
   },
   require: [file(".styleguidist/setup.js")],
-  propsParser: require("react-docgen-typescript").withCustomConfig(
-    file("packages/components/tsconfig.json"),
-    {
-      propFilter(prop) {
-        if (prop.parent) {
-          return (
-            !prop.parent.fileName.includes("node_modules") ||
-            prop.parent.fileName.includes("@types/styled-system")
-          )
-        }
-        return true
-      },
-      componentNameResolver: (exp, source) =>
-        exp.getName() === "StyledComponentClass" &&
-        require("react-docgen-typescript").getDefaultExportForFile(source)
-    }
-  ).parse,
+  propsParser: require("react-docgen-typescript").withCustomConfig(file("tsconfig.json"), {
+    propFilter(prop) {
+      if (prop.parent) {
+        return (
+          !prop.parent.fileName.includes("node_modules") ||
+          prop.parent.fileName.includes("@types/styled-system")
+        )
+      }
+      return true
+    },
+    componentNameResolver: (exp, source) =>
+      exp.getName() === "StyledComponentClass" &&
+      require("react-docgen-typescript").getDefaultExportForFile(source)
+  }).parse,
   webpackConfig: {
     module: {
       rules: [

packages/mixins/src/mixins.ts

@@ -18,6 +18,6 @@
     "strict": true,
     "target": "esnext"
   },
-  "exclude": ["node_modules"],
+  "exclude": ["packages/components/node_modules", "packages/mixins/node_modules"],
   "include": ["**/*.ts", "**/*.tsx"]
 }