feat(Codebytes): move codebytes parent disc 351 (#11)

* move parent

* remove extra assets

* remove rendermode

* remove consts

* remove unused type

* add babel config to package

* fix prettier

* remove unneccessary dependencies

* change to codebyte editor

* change name to code byte editor

* update main.js

* add webpack config

* ignore dist files

* move storybook outside package

* remove codebyte-editor

* update changelog

* update styleguide package.json

* run prettier

* additional cleanup based on feedback

* prettier

* remove unused packages

Author: BandanaKM

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
       },
     },
     {
-      files: ['**/jest/*'],
+      files: ['**/jest/*', '**/*.stories.mdx'],
       rules: {
         'import/no-extraneous-dependencies': [
           'error',

.vscode/settings.json

@@ -1,26 +1,40 @@
 {
   "eslint.options": {
-    "extensions": [".js", ".jsx", ".md", ".ts", ".tsx"]
+    "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
   },
   "eslint.probe": [
+    "mdx",
     "markdown",
     "javascript",
     "javascriptreact",
     "typescript",
     "typescriptreact",
     "html"
   ],
-  "eslint.rules.customizations": [{ "rule": "*", "severity": "downgrade" }],
   "eslint.validate": [
+    "mdx",
     "markdown",
     "javascript",
     "javascriptreact",
     "typescript",
     "typescriptreact",
     "html"
   ],
+  "files.associations": {
+    "*.md": "mdx"
+  },
+  "[mdx]": {
+    "editor.wordWrap": "wordWrapColumn",
+    "editor.wordWrapColumn": 120,
+    "editor.codeActionsOnSave": {
+      "source.fixAll": true
+    }
+  },
   "search.exclude": {
     "docs": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

package.json

@@ -21,7 +21,9 @@
     "verify-changed": "lerna run verify --since --include-dependencies",
     "clear-modules": "lerna clean -y && rm -rf node_modules",
     "build-all": "lerna run lernaBuildTask",
-    "build-changed": "lerna run lernaBuildTask --since --include-dependencies"
+    "build-changed": "lerna run lernaBuildTask --since --include-dependencies",
+    "start:storybook": "cd ./packages/styleguide && yarn start",
+    "start": "yarn && yarn start:storybook"
   },
   "lint-staged": {
     "**/*.{js,ts,tsx,json}": [
@@ -45,6 +47,7 @@
     "lerna": "3.22.1"
   },
   "devDependencies": {
+    "@codecademy/webpack-config": "^6.0.0",
     "@babel/cli": "7.13.10",
     "@babel/core": "7.13.10",
     "@babel/preset-typescript": "^7.13.0",

packages/codebytes/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: ['codecademy', '@babel/preset-typescript'],
+  plugins: [
+    [
+      '@emotion',
+      {
+        sourceMap: true,
+        autoLabel: 'always',
+        labelFormat: '[local]',
+      },
+    ],
+  ],
+  include: ['./src/**/*'],
+  ignore: ['__tests__', './**/*.d.ts'],
+};

packages/codebytes/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@codecademy/codebytes",
+  "description": "Codebytes Code Editor",
+  "version": "0.0.1",
+  "author": "Codecademy Engineering <[email protected]>",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "dist/**/[A-Z]**/[A-Z]*.js",
+    "dist/**/[A-Z]**/index.js"
+  ],
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:Codecademy/client-modules.git"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.1",
+    "react-dom": ">=16.8.1"
+  },
+  "dependencies": {
+    "@codecademy/gamut": "*",
+    "@codecademy/gamut-styles": "*",
+    "@codecademy/gamut-icons": "*",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0"
+  },
+  "scripts": {
+    "verify": "tsc --noEmit",
+    "build:compile": "babel ./src --out-dir ./dist --copy-files --extensions \".ts,.tsx\"",
+    "build:clean": "rm -rf dist",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build": "yarn build:clean && yarn build:compile && yarn build:types",
+    "build:watch": "yarn build && onchange ./src -- yarn build:compile && yarn build:types"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@emotion/jest": "^11.3.0",
+    "@testing-library/dom": "^7.31.2",
+    "@testing-library/react": "^11.0.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/codebytes/src/editor.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type EditorProps = {
+  text: string;
+  onChange: (text: string) => void;
+};
+
+export const Editor: React.FC<EditorProps> = ({ text, onChange }) => {
+  return <textarea value={text} onChange={(e) => onChange(e.target.value)} />;
+};

packages/codebytes/src/index.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+import { Editor } from './editor';
+
+export interface CodeByteEditorProps {
+  text: string;
+}
+
+export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
+  text: initialText,
+}) => {
+  const [text, setText] = useState<string>(initialText);
+  return (
+    <>
+      <Editor
+        text={text}
+        onChange={(newText: string) => {
+          setText(newText);
+        }}
+      />
+    </>
+  );
+};
+
+export default CodeByteEditor;

packages/codebytes/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["../../typings/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx"]
+}

packages/styleguide/.storybook/babel.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  presets: ['codecademy', '@babel/preset-typescript'],
+  plugins: [
+    'macros',
+    [
+      '@emotion',
+      {
+        sourceMap: true,
+        autoLabel: 'always',
+        labelFormat: '[local]',
+        cssPropOptimization: true,
+      },
+    ],
+  ],
+  ignore: [],
+  env: {
+    test: {
+      plugins: ['require-context-hook'],
+    },
+  },
+};

packages/styleguide/.storybook/main.ts

@@ -0,0 +1,44 @@
+const path = require('path');
+const { configs } = require('@codecademy/webpack-config');
+
+// https://github.com/storybookjs/storybook/issues/12262#issuecomment-681953346
+// make a shallow copy of an object, rejecting keys that match /emotion/
+function emotionless<T extends Record<string, unknown>>(object: T) {
+  let result = {} as T;
+  for (let key in object) {
+    if (!/emotion/.test(key)) {
+      result[key] = object[key];
+    }
+  }
+  return result;
+}
+
+module.exports = {
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    'storybook-addon-designs',
+  ],
+  stories: ['../stories/**/*.stories.mdx'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+    },
+  },
+
+  webpackFinal: (config: any) => {
+    config.module.rules = config.module.rules.concat(
+      configs.css().module.rules
+    );
+
+    config.resolve = {
+      ...config.resolve,
+      alias: emotionless(config.resolve.alias),
+    };
+
+    return config;
+  },
+};