@codecademy/codebytes 1.0.4-alpha.37044bcdd.0 → 1.0.4-alpha.41a141e2a.0

package/src/helpers/useIntersection.test.ts

@@ -0,0 +1,87 @@
+import { act, renderHook } from '@testing-library/react-hooks/dom';
+
+import { useIntersection } from './useIntersection';
+
+const originalIntersectionObserver = window.IntersectionObserver;
+const mockObserve = jest.fn();
+const mockDisconnect = jest.fn();
+const mockIntersectionObserver = jest.fn();
+const mockIntersectionObserverInstance = {
+  observe: mockObserve,
+  disconnect: mockDisconnect,
+};
+const ref = { current: document.createElement('div') };
+const options = {
+  root: null,
+  rootMargin: '0px',
+  threshold: 0.2,
+};
+
+beforeEach(() => {
+  mockIntersectionObserver.mockReturnValue(mockIntersectionObserverInstance);
+  window.IntersectionObserver = mockIntersectionObserver;
+});
+
+afterEach(() => {
+  window.IntersectionObserver = originalIntersectionObserver;
+});
+
+describe('useIntersection', () => {
+  test('intersection observer is not called', async () => {
+    // We render useIntersection with ref.current = null,
+    // which should prevent our hook from calling intersectionObserver.
+    const hook = renderHook(() => useIntersection({ current: null }, options));
+    expect(mockObserve).not.toHaveBeenCalled();
+
+    hook.unmount();
+    expect(mockDisconnect).not.toHaveBeenCalled();
+  });
+
+  test('intersection observer is called', async () => {
+    // We render useIntersection with ref.current = HTMLdivElement,
+    // which should make our hook call intersectionObserver.
+    const hook = renderHook(() => useIntersection(ref, options));
+    expect(mockObserve).toHaveBeenCalledWith(ref.current);
+
+    hook.unmount();
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+
+  it('returns the IntersectionObserverEntry from the callback', async () => {
+    const fakeIntersectionObserverEntry = {};
+    let handler: Function = () => {
+      return null;
+    };
+
+    // We mock the insersectionObserver Implementation
+    // to grab the handler, which allows us to simulate
+    // the element getting scrolled into view.
+    mockIntersectionObserver.mockImplementationOnce((cb) => {
+      handler = cb;
+
+      return mockIntersectionObserverInstance;
+    });
+    const { result, rerender, unmount } = renderHook(() =>
+      useIntersection(ref, options)
+    );
+
+    // Element hasn't been scrolled into view and therefore
+    // results.current should be null.
+    expect(result.current).toBeNull();
+
+    // Simulate element being scrolled into view
+    act(() => {
+      handler([fakeIntersectionObserverEntry]);
+    });
+    expect(result.current).toEqual(fakeIntersectionObserverEntry);
+
+    // We expect the results to remain the same after a rerender
+    rerender();
+    expect(result.current).toEqual(fakeIntersectionObserverEntry);
+
+    // The results should be null after unmounting.
+    unmount();
+    rerender();
+    expect(result.current).toBeNull();
+  });
+});

package/src/helpers/useIntersection.ts

@@ -0,0 +1,35 @@
+import { RefObject, useEffect, useState } from 'react';
+
+export const useIntersection = (
+  ref: RefObject<HTMLElement>,
+  options: IntersectionObserverInit
+): IntersectionObserverEntry | null => {
+  const [
+    intersectionObserverEntry,
+    setIntersectionObserverEntry,
+  ] = useState<IntersectionObserverEntry | null>(null);
+
+  useEffect(() => {
+    if (ref.current && typeof IntersectionObserver === 'function') {
+      const handler = (entries: IntersectionObserverEntry[]) => {
+        setIntersectionObserverEntry(entries[0]);
+      };
+
+      const observer = new IntersectionObserver(handler, {
+        threshold: options.threshold,
+        root: options.root,
+        rootMargin: options.rootMargin,
+      });
+      observer.observe(ref.current);
+
+      return () => {
+        setIntersectionObserverEntry(null);
+        observer.disconnect();
+      };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [ref, options.threshold, options.root, options.rootMargin]);
+
+  return intersectionObserverEntry;
+};

package/{dist/index.d.ts → src/index.ts}

@@ -1,3 +1,3 @@
-export * from './codeByteEditor';
-export * from './consts';
-export * from './types';
+export * from './codeByteEditor';
+export * from './consts';
+export * from './types';

package/src/languageSelection.tsx

@@ -0,0 +1,26 @@
+import { Select, Text } from '@codecademy/gamut';
+import { ColorMode } from '@codecademy/gamut-styles';
+import React from 'react';
+
+import type { LanguageOption } from './consts';
+import { LanguageOptions } from './consts';
+
+export type LanguageSelectionProps = {
+  onChange: (newLanguage: LanguageOption) => void;
+};
+
+export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
+  onChange,
+}) => {
+  return (
+    <ColorMode mode="dark" flex={1} px={16} pt={48}>
+      <Text mb={16}>Which language do you want to code in?</Text>
+      <Select
+        id="language-select"
+        aria-label="Select a language"
+        options={LanguageOptions}
+        onChange={(e) => onChange(e.target.value as LanguageOption)}
+      />
+    </ColorMode>
+  );
+};

package/src/libs/eventTracking.ts

@@ -0,0 +1,18 @@
+import { createTracker } from '@codecademy/tracking';
+
+const IS_DEV = process.env.NODE_ENV === 'development';
+
+// TODO: confirm tracking details and implementation DISC-447
+const tracker = createTracker({
+  apiBaseUrl:
+    typeof window === 'undefined'
+      ? 'https://www.codecademy.com'
+      : window.location.origin,
+  verbose: IS_DEV,
+});
+
+export const {
+  click: trackUserClick,
+  visit: trackUserVisit,
+  impression: trackUserImpression,
+} = tracker;

package/src/theme.d.ts

@@ -0,0 +1,5 @@
+import { CoreTheme } from '@codecademy/gamut-styles';
+
+declare module '@emotion/react' {
+  export interface Theme extends CoreTheme {}
+}

package/src/types.ts

@@ -0,0 +1,30 @@
+import { BackgroundProps } from '@codecademy/gamut-styles';
+import { UserClickData } from '@codecademy/tracking';
+
+import { LanguageOption } from './consts';
+
+export interface CodebytesChangeHandler {
+  (text: string, language: LanguageOption): void;
+}
+
+export interface CodebytesCopyFormatterParams {
+  text: string;
+  language: LanguageOption;
+}
+
+export type CodebytesCopyFormatter = ({
+  text,
+  language,
+}: CodebytesCopyFormatterParams) => string;
+
+export interface CodeByteEditorProps extends Omit<BackgroundProps, 'bg'> {
+  text?: string;
+  language?: LanguageOption;
+  hideCopyButton?: boolean;
+  copyFormatter?: CodebytesCopyFormatter;
+  snippetsBaseUrl?: string;
+  onEdit?: CodebytesChangeHandler;
+  onLanguageChange?: CodebytesChangeHandler;
+  trackingData?: Omit<UserClickData, 'target'>;
+  trackFirstEdit?: boolean;
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "allowJs": true,
+    "declaration": true,
+    "noUnusedParameters": false,
+    "sourceMap": true,
+    "strictFunctionTypes": false,
+    "strictPropertyInitialization": false
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": [
+    "./dist",
+    "jest.config.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts",
+    "src/__tests__/mocks.ts"
+  ]
+}

package/dist/MonacoEditor/colorsDark.d.ts

@@ -1,32 +0,0 @@
-export declare const syntax: {
-    attribute: "#b4d353";
-    annotation: "#ea6c8b";
-    atom: "#cc7bc2";
-    basic: "#ffffff";
-    comment: "#939598";
-    constant: "#ff8973";
-    decoration: "#ea6c8b";
-    invalid: "#ea6c8b";
-    key: "#83fff5";
-    keyword: "#b3ccff";
-    number: "#ea6c8b";
-    operator: "#ea6c8b";
-    predefined: "#ffffff";
-    property: "#ea6c8b";
-    regexp: "#b4d353";
-    string: "#ffe083";
-    tag: "#ea6c8b";
-    text: "#ff8973";
-    value: "#ffe083";
-    variable: "#b4d353";
-};
-export declare const ui: {
-    background: string;
-    text: "#ffffff";
-    indent: {
-        active: string;
-        inactive: string;
-    };
-};
-export declare type SyntaxColors = typeof syntax;
-export declare type UIColors = typeof ui;

package/dist/MonacoEditor/index.d.ts

@@ -1,8 +0,0 @@
-import { EditorProps } from '@monaco-editor/react';
-import React from 'react';
-export declare type SimpleMonacoEditorProps = {
-    value: string;
-    language: string;
-    onChange?: EditorProps['onChange'];
-};
-export declare const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps>;

package/dist/MonacoEditor/theme.d.ts

@@ -1,2 +0,0 @@
-import type * as monaco from 'monaco-editor';
-export declare const dark: monaco.editor.IStandaloneThemeData;

package/dist/MonacoEditor/types.d.ts

@@ -1 +0,0 @@
-export declare type Monaco = typeof import('monaco-editor');

package/dist/api.d.ts

@@ -1,12 +0,0 @@
-import type { LanguageOption } from './consts';
-interface Response {
-    stderr: string;
-    stdout: string;
-    exit_code: number;
-}
-interface PostSnippetData {
-    language: LanguageOption;
-    code: string;
-}
-export declare const postSnippet: (data: PostSnippetData, snippetsBaseUrl?: string | undefined) => Promise<Response>;
-export {};

package/dist/codeByteEditor.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CodeByteEditorProps } from './types';
-export declare const CodeByteEditor: React.FC<CodeByteEditorProps>;
-export default CodeByteEditor;

package/dist/consts.d.ts

@@ -1,23 +0,0 @@
-export declare const LanguageOptions: {
-    '': string;
-    cpp: string;
-    csharp: string;
-    golang: string;
-    javascript: string;
-    php: string;
-    python: string;
-    ruby: string;
-    scheme: string;
-};
-export declare type LanguageOption = keyof typeof LanguageOptions;
-export declare const validLanguages: ("cpp" | "csharp" | "golang" | "javascript" | "php" | "python" | "ruby" | "scheme")[];
-export declare const helloWorld: {
-    readonly cpp: "#include <iostream>\nint main() {\n  std::cout << \"Hello world!\";\n  return 0;\n}";
-    readonly csharp: "namespace HelloWorld {\n  class Hello {\n    static void Main(string[] args) {\n      System.Console.WriteLine(\"Hello world!\");\n    }\n  }\n}";
-    readonly golang: "package main\nimport \"fmt\"\nfunc main() {\n  fmt.Println(\"Hello world!\")\n}";
-    readonly javascript: "console.log('Hello world!');";
-    readonly php: "<?php\n  echo \"Hello world!\";\n?>";
-    readonly python: "print('Hello world!')";
-    readonly ruby: "puts \"Hello world!\"";
-    readonly scheme: "(begin\n  (display \"Hello world!\")\n  (newline))";
-};

package/dist/drawers.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare type DrawersProps = {
-    leftChild: React.ReactNode;
-    rightChild: React.ReactNode;
-};
-export declare const Drawers: React.FC<DrawersProps>;

package/dist/editor.d.ts

@@ -1,15 +0,0 @@
-import { UserClickData } from '@codecademy/tracking';
-import React from 'react';
-import type { LanguageOption } from './consts';
-import { CodebytesCopyFormatter } from './types';
-declare type EditorProps = {
-    hideCopyButton: boolean;
-    language: LanguageOption;
-    text: string;
-    onChange: (text: string) => void;
-    snippetsBaseUrl?: string;
-    copyFormatter?: CodebytesCopyFormatter;
-    trackingData?: Omit<UserClickData, 'target'>;
-};
-export declare const Editor: React.FC<EditorProps>;
-export {};

package/dist/helpers/index.d.ts

@@ -1,2 +0,0 @@
-import { UserClickData } from '@codecademy/tracking';
-export declare const trackClick: (target: string, trackingData?: Omit<UserClickData, "target"> | undefined) => void;

package/dist/helpers/useEverInView.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const useEverInView: (rootMargin?: string, threshold?: number) => {
-    everInView: boolean;
-    ref: import("react").MutableRefObject<null>;
-};

package/dist/helpers/useIntersection.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from 'react';
-export declare const useIntersection: (ref: RefObject<HTMLElement>, options: IntersectionObserverInit) => IntersectionObserverEntry | null;