@codecademy/gamut-patterns 1.0.0-alpha.b00dca.0 → 1.0.0-alpha.d04966.0

package/dist/svg/StripeRegular.svg

@@ -0,0 +1,28 @@
+<svg>
+    <pattern
+      id="stripeRegular"
+      x="0"
+      y="0"
+      width="8"
+      height="8"
+      patternUnits="userSpaceOnUse"
+    >
+      <rect x="1" width="1" height="1" fill="currentColor" />
+      <rect width="1" height="1" fill="currentColor" />
+      <rect x="2" width="1" height="1" fill="currentColor" />
+      <rect x="3" width="1" height="1" fill="currentColor" />
+      <rect x="1" y="4" width="1" height="1" fill="currentColor" />
+      <rect y="4" width="1" height="1" fill="currentColor" />
+      <rect x="2" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="3" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="5" width="1" height="1" fill="currentColor" />
+      <rect x="4" width="1" height="1" fill="currentColor" />
+      <rect x="6" width="1" height="1" fill="currentColor" />
+      <rect x="7" width="1" height="1" fill="currentColor" />
+      <rect x="5" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="4" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="6" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="7" y="4" width="1" height="1" fill="currentColor" />
+    </pattern>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#stripeRegular)" />
+  </svg>

package/dist/types.d.ts

@@ -0,0 +1 @@
+export type { PatternProps } from './props';

package/dist/usePatternId.d.ts

@@ -0,0 +1 @@
+export declare function usePatternId(id: string): string;

package/dist/usePatternId.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+var counter = {};
+export function usePatternId(id) {
+  return useMemo(function () {
+    var key = id.toLowerCase();
+    var idCounter = (counter === null || counter === void 0 ? void 0 : counter[key]) || 0;
+    counter[key] = idCounter;
+    return "".concat(id, "-pattern-").concat(counter[key] += 1);
+  }, [id]);
+}

package/emotion-plugin.js

@@ -0,0 +1,46 @@
+const plugin = (api) => {
+  const vistor = {
+    JSXElement(path) {
+      // We only want to find SVG element
+      if (path.get('openingElement.name').isJSXIdentifier({ name: 'svg' })) {
+        // Update the opening and closing tags to the styled component identifier
+        const emotionTag = api.types.jsxIdentifier('Svg');
+        path.get('openingElement.name').replaceWith(emotionTag);
+        path.get('closingElement.name').replaceWith(emotionTag);
+      }
+    },
+    JSXAttribute(path) {
+      const valuePath = path.get('value');
+      const attrName = path.get('name').toString();
+      if (attrName === 'id' && valuePath.isStringLiteral()) {
+        valuePath.replaceWith(
+          api.types.jsxExpressionContainer(
+            api.template.ast('patternId').expression
+          )
+        );
+      }
+
+      if (
+        attrName === 'fill' &&
+        valuePath.isStringLiteral() &&
+        valuePath.toString().includes('url')
+      ) {
+        valuePath.replaceWith(
+          api.types.jsxExpressionContainer(
+            api.template.ast('`url(#${patternId})`').expression
+          )
+        );
+      }
+    },
+  };
+
+  return {
+    visitor: {
+      Program(path) {
+        path.traverse(vistor);
+      },
+    },
+  };
+};
+
+module.exports = plugin;

package/icon-template.js

@@ -0,0 +1,28 @@
+const path = require('path');
+const { startCase } = require('lodash');
+
+function iconTemplate(api, opts, { jsx }) {
+  const template = api.template.smart({ plugins: ['jsx', 'typescript'] });
+  const { componentName, filePath } = opts.state;
+  const exportName = componentName.replace('Svg', '');
+  const title = startCase(path.basename(filePath, '.svg'));
+
+  return template.ast`
+    import * as React from 'react';
+    import { Svg, PatternProps } from '../props';
+    import { usePatternId } from '../usePatternId';
+
+    export const ${exportName} = React.forwardRef<SVGSVGElement, PatternProps>(({
+      title = "${title}",
+      titleId,
+      ...props
+    },
+      svgRef
+    ) => {
+      const patternId = usePatternId('${exportName}');
+
+      return ${jsx};
+    });
+  `;
+}
+module.exports = iconTemplate;

package/index-template.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+function indexTemplate(files) {
+  const exportEntries = files.map((file) => {
+    const basename = path.basename(file, path.extname(file));
+    return `export * from './${basename}';`;
+  });
+  return exportEntries.join('\n');
+}
+module.exports = indexTemplate;

package/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest.config.base')('gamut-patterns');

package/package.json

@@ -1,52 +1,48 @@
 {
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bugs": {
-    "url": "https://github.com/Codecademy/client-modules/issues"
+    "url": "https://github.com/Codecademy/gamut/issues"
   },
   "dependencies": {
-    "@codecademy/gamut": "33.0.0-alpha.b00dca.0",
-    "@codecademy/gamut-styles": "^9.5.3",
-    "@codecademy/gamut-system": "^0.7.0",
+    "@codecademy/gamut-styles": "13.0.0-alpha.d04966.0",
+    "@codecademy/variance": "1.0.0-alpha.d04966.0",
     "classnames": "^2.2.5"
   },
   "description": "Pattern library for Codecademy",
-  "homepage": "https://github.com/Codecademy/client-modules#readme",
+  "homepage": "https://github.com/Codecademy/gamut#readme",
   "name": "@codecademy/gamut-patterns",
-  "module": "./dist/index.js",
-  "main": "./dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
   "license": "MIT",
   "peerDependencies": {
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "react": ">=16.8.1",
-    "react-dom": ">=16.8.1"
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
+  "devDependencies": {
+    "@svgr/cli": "5.5.0",
+    "lodash": "^4.17.5",
+    "svgo": "^1.3.2"
   },
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/Codecademy/client-modules.git"
+    "url": "git+ssh://git@github.com/Codecademy/gamut.git"
   },
   "scripts": {
     "verify": "tsc --noEmit",
-    "build:compile": "babel ./src --out-dir ./dist --copy-files --extensions \".ts,.tsx\"",
-    "build:clean": "rm -rf dist",
+    "format": "svgo -f ./src/svg --pretty --config=.svgo.yml",
+    "build:icons": "rm -rf ./src/patterns && svgr --out-dir ./src/patterns --ext 'tsx' ./src/svg",
     "build:types": "tsc --emitDeclarationOnly",
-    "build": "yarn build:clean && yarn build:compile && yarn build:types",
+    "build:compile": "babel ./src --out-dir ./dist --copy-files --extensions \".ts,.tsx\"",
+    "build": "yarn build:icons && yarn build:compile && yarn build:types",
     "lernaBuildTask": "yarn build"
   },
-  "sideEffects": [
-    "dist/**/[A-Z]**/[A-Z]*.js",
-    "dist/**/[A-Z]**/index.js"
-  ],
-  "version": "1.0.0-alpha.b00dca.0",
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
-  },
-  "files": [
-    "lib"
-  ],
-  "gitHead": "31260f6461cfb40fb1b2a7928ae95278817e5e77"
+  "sideEffects": false,
+  "version": "1.0.0-alpha.d04966.0",
+  "gitHead": "8ddee0b47bb724237b970fff8f68bfef6962fa79"
 }

package/svgr.config.js

@@ -0,0 +1,29 @@
+const emotionPlugin = require('./emotion-plugin');
+const template = require('./icon-template');
+const indexTemplate = require('./index-template');
+
+module.exports = {
+  dimensions: false,
+  titleProp: true,
+  ref: true,
+  svgProps: {
+    fill: 'currentColor',
+    role: 'img',
+    'aria-hidden': 'true',
+  },
+  prettierConfig: {
+    parser: 'typescript',
+  },
+  replaceAttrValues: {
+    '#000': 'currentColor',
+    '#111': 'currentColor',
+    '#444': 'currentColor',
+  },
+  jsx: {
+    babelConfig: {
+      plugins: [emotionPlugin],
+    },
+  },
+  indexTemplate,
+  template,
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "../../typings/*.d.ts",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "../gamut-styles/dist/typings/theme.d.ts"
+  ],
+  "compilerOptions": {
+    "outDir": "./dist"
+  }
+}