15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/dev-tool/build/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name" : "Chromogen",
3 | "version" : "0.1.0",
4 | "manifest_version" : 2,
5 | "description" : "DevTool panel for Chromogen, a UX-driven test generator for Recoil apps.",
6 | "author" : "Chromogen Team",
7 | "icons": { "128": "./imgs/chromogen-logo.png"},
8 | "devtools_page" : "devtools.html",
9 | "background": {
10 | "persistent": false,
11 | "scripts": ["bundles/background.bundle.js"]
12 | },
13 | "content_scripts": [
14 | {
15 | "matches": ["
2 |
3 | # The official demo app for [Chromogen](https://github.com/oslabs-beta/Chromogen).
4 |
5 | 
6 |
7 |
8 |
9 | ## Selector Implementations
10 | - Readonly:
11 | 1. displayed todo list items, based on filter selection (sort & active/complete)
12 | 2. stats (priority count and active/complete counts)
13 | 3. displayed todo list empty / non-empty
14 | - Writeable:
15 | 1. "all complete" checkbox toggle
16 | 1. reset filter states
17 | - Promise:
18 | 1. quote text
19 | - Async / Await:
20 | 1. xkcd comic
21 | - selectorFamily (_in progress_):
22 | 1. search bar
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/package/hooks_generator/hooks_src/output/hooks-output.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import { Ledger } from '../hooks-types';
3 | import { importHooksId, testState } from './hooks-output-utils';
4 | /* eslint-enable */
5 |
6 | // NOTE: HooksOutput needs a beforeEach to bring down state (to instantiate state and create mock data for testing)
7 | export const hooksOutput = ({
8 | state,
9 | id
10 | }: Ledger): any =>
11 | `import { renderHook } from '@testing-library/react-hooks';
12 | import React, { useState } from 'react';
13 | import {
14 | ${importHooksId(id)}
15 |
16 | } from '
14 |
19 | {quoteText}
15 | 18 |
13 | setAllComplete(!allComplete)}
19 | />
20 | all
21 |
22 | )
23 | );
24 | };
25 |
26 | export default TodoQuickCheck;
27 |
--------------------------------------------------------------------------------
/demo-todo/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | entry: path.resolve(__dirname, './src/index.js'),
5 | output: {
6 | filename: 'bundle.js',
7 | },
8 | devServer: {
9 | contentBase: path.resolve(__dirname, './src'),
10 | historyApiFallback: true,
11 | },
12 | mode: process.env.NODE_ENV,
13 | module: {
14 | rules: [
15 | {
16 | test: /\.(js|jsx)$/,
17 | exclude: /node_modules/,
18 | loader: 'babel-loader',
19 | options: {
20 | presets: ['@babel/preset-env', '@babel/preset-react'],
21 | plugins: ['@babel/transform-runtime'],
22 | },
23 | },
24 | {
25 | test: /\.css$/,
26 | use: [
27 | {
28 | loader: 'style-loader',
29 | },
30 | {
31 | loader: 'css-loader',
32 | },
33 | ],
34 | },
35 | ],
36 | },
37 | resolve: {
38 | extensions: ['.js', '.jsx'],
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/demo-todo/src/components/ReadOnlyTodoItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Checkbox from '@material-ui/core/Checkbox';
3 | import '../styles/styles.css';
4 | import { todoListState } from '../store/atoms';
5 | import { useRecoilValue } from 'recoil';
6 |
7 | const ReadOnlyTodoItem = ({ item }) => {
8 | const checkBoxClasses = {
9 | low: 'lowPriority',
10 | medium: 'mediumPriority',
11 | high: 'highPriority',
12 | };
13 |
14 | const todoList = useRecoilValue(todoListState);
15 |
16 | return todoList.find((todo) => todo.id === item.id) ? (
17 |
18 |
19 | todo.id === item.id).isComplete}
22 | color="default"
23 | inputProps={{ 'aria-label': 'primary checkbox' }}
24 | style={{ cursor: 'default' }}
25 | />
26 |
27 | ) : null;
28 | };
29 | export default ReadOnlyTodoItem;
30 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 | ## Types of changes
2 |
3 | - [ ] Bugfix (change which fixes an issue)
4 | - [ ] New feature (change which adds functionality)
5 | - [ ] Refactor (change which changes the codebase without affecting its external behavior)
6 | - [ ] Non-breaking change (fix or feature that would causes existing functionality to work as expected)
7 | - [ ] Breaking change (fix or feature that would cause existing functionality to __not__ work as expected)
8 | ## Purpose
9 |
10 | ## Approach
11 |
12 | ## Resources
13 |
14 | ## Screenshot(s)
15 |
16 |
17 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/demo-todo/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Michelle Holland
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package/hooks_generator/hooks_src/output/hooks-output-utils.ts:
--------------------------------------------------------------------------------
1 | // Output functions here are used inside hooks-output-utils as regex inside the user's exported test file
2 |
3 | // Import hooks state from user's app
4 | export function importHooksId(id: string | number) {
5 | return `${id}`;
6 | }
7 |
8 | // Tests whether current state is NOT null or undefined
9 | export function testState(state: any, id: string | number) {
10 | return `'should show that state in ${id} is not null or undefined', () => {
11 | expect(${state.length-1}).not.toBe(undefined);
12 | expect(${state.length-1}).not.toBe(null));
13 | }`
14 | }
15 |
16 | // Testing that individual state is changing, and our ledger is updating accordingly
17 | // BUG: State needs to be a primitive data type or mapped over in order for the test to be read. Arrays and objects will show up as undefined
18 |
19 | // export function testStateChange (state: any, id: string | number, dispCount: number) {
20 | // return `'should show that state in ${id} changes after every dispatch and its length should be equal to dispatch count', () => {
21 | // expect(${state[dispCount-1]}).not.toBe(${state[dispCount-2]}));
22 | // expect(${state.length}).toBe(${dispCount});
23 | // }`
24 | // }
--------------------------------------------------------------------------------
/demo-todo/src/store/atoms.js:
--------------------------------------------------------------------------------
1 | import { atom } from 'chromogen';
2 |
3 | /* ----- ATOMS ----- */
4 |
5 | // unsorted, unfiltered todo list
6 | const todoListState = atom({
7 | key: 'mismatchTodoList',
8 | default: [], // array of objects - each object has id, text, isComplete, and priority props
9 | });
10 |
11 | // filter select
12 | const todoListFilterState = atom({
13 | key: 'todoListFilterState',
14 | default: 'Show All',
15 | });
16 |
17 | // toggle sort
18 | const todoListSortState = atom({
19 | key: 'todoListSortState',
20 | default: false,
21 | });
22 |
23 | // random number for fetching quote & comic
24 | const quoteNumberState = atom({
25 | key: 'quoteNumberState',
26 | default: Math.floor(Math.random() * 1643),
27 | });
28 |
29 | const searchResultState = atom({
30 | key: 'searchResultState',
31 | default: {
32 | all: {
33 | searchTerm: '',
34 | results: [],
35 | },
36 | high: {
37 | searchTerm: '',
38 | results: [],
39 | },
40 | medium: {
41 | searchTerm: '',
42 | results: [],
43 | },
44 | low: {
45 | searchTerm: '',
46 | results: [],
47 | },
48 | },
49 | });
50 |
51 | export {
52 | todoListState,
53 | todoListFilterState,
54 | todoListSortState,
55 | quoteNumberState,
56 | searchResultState,
57 | };
58 |
--------------------------------------------------------------------------------
/package/recoil_generator/__tests__/output.test.js:
--------------------------------------------------------------------------------
1 | import { setFilter, output } from '../src/output/output.ts';
2 |
3 | // testing setFilter function
4 | describe('setFilter', () => {
5 | it('should remove setter keys from array of selector keys', () => {
6 | // create mock selectors array
7 | const selectors = ['one', 'two', 'three'];
8 | // create mock setters array
9 | const setters = ['one'];
10 | // store evaluated result of invoking setFilter on the mock data in an array
11 | const filtered = setFilter(selectors, setters);
12 | // verify that the info from setters caused a matching value to be removed from the selectors array ('one')
13 | expect(filtered).not.toContain('one');
14 | });
15 | });
16 |
17 | describe('output', () => {
18 | it('should return a string', () => {
19 | // create mock ledger object
20 | const mockLedger = {
21 | atoms: [],
22 | selectors: [],
23 | setters: [],
24 | atomFamilies: [],
25 | selectorFamilies: [],
26 | initialRender: [],
27 | initialRenderFamilies: [],
28 | transactions: [],
29 | setTransactions: [],
30 | };
31 | // verify that type of mockLedger is a string after output function is invoked on it
32 | expect(typeof output(mockLedger)).toEqual('string');
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/demo-todo/src/components/TodoList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useRecoilValue } from 'recoil';
3 | import { sortedTodoListState } from '../store/store';
4 | import TodoItem from './TodoItem';
5 | import TodoItemCreator from './TodoItemCreator';
6 | import TodoListFilters from './TodoListFilters';
7 | import TodoQuickCheck from './TodoQuickCheck';
8 | import Quotes from './Quotes';
9 | import SearchBar from './SearchBar';
10 | import '../styles/styles.css';
11 |
12 | const TodoList = () => {
13 | const todoList = useRecoilValue(sortedTodoListState);
14 |
15 | return (
16 |
17 |
38 | );
39 | };
40 |
41 | export default TodoList;
42 |
--------------------------------------------------------------------------------
/dev-tool/app/Components/Recorder.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react';
3 | import PlayArrowIcon from '@material-ui/icons/PlayArrow';
4 | import StopIcon from '@material-ui/icons/Stop';
5 | import GetAppIcon from '@material-ui/icons/GetApp';
6 |
7 | const Recorder: React.FC<{ status: boolean }> = ({ status }) => {
8 | // Connect to background.js
9 | const backgroundConnection = chrome.runtime.connect();
10 |
11 | // Send messages to background.js
12 | const sendMessage = (action: string) => {
13 | backgroundConnection.postMessage({
14 | action,
15 | tabId: chrome.devtools.inspectedWindow.tabId,
16 | });
17 | };
18 |
19 | return (
20 |
18 | Loading...}>
19 |
21 |
22 |
23 |
24 |
36 |
37 | Totally Todos!
25 | 26 |
27 |
34 |
21 |
30 |
33 |
34 | );
35 | };
36 |
37 | export default Recorder;
38 |
--------------------------------------------------------------------------------
/dev-tool/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
3 |
4 | const config = {
5 | entry: {
6 | app: path.resolve(__dirname, './app/index.tsx'),
7 | background: path.resolve(__dirname, './background.ts'),
8 | content: path.resolve(__dirname, './content.ts'),
9 | },
10 | output: {
11 | path: path.join(__dirname, './build/bundles'),
12 | filename: '[name].bundle.js',
13 | },
14 | module: {
15 | rules: [
16 | { test: /\.(t|j)sx?$/, use: { loader: 'ts-loader' }, exclude: /node_modules/ },
17 | { enforce: 'pre', test: /\.js$/, exclude: /node_modules/, loader: 'source-map-loader' },
18 | {
19 | test: /\.css$/,
20 | use: [
21 | {
22 | loader: 'style-loader',
23 | },
24 | {
25 | loader: 'css-loader',
26 | },
27 | ],
28 | },
29 | ],
30 | },
31 | resolve: {
32 | extensions: ['.ts', '.tsx', '.js', '.jsx'],
33 | },
34 | devtool: 'source-map',
35 | plugins: [],
36 | };
37 |
38 | module.exports = (env, argv) => {
39 | if (argv.mode === 'development') {
40 | config.plugins.push(
41 | new ChromeExtensionReloader({
42 | entries: {
43 | contentScript: ['app', 'content'],
44 | background: ['background'],
45 | },
46 | }),
47 | );
48 | }
49 | return config;
50 | };
51 |
--------------------------------------------------------------------------------
/package/hooks_generator/hooks_src/component/hooks-component-utils.ts:
--------------------------------------------------------------------------------
1 | import type { CSSProperties } from 'react';
2 | import { hooksLedger as ledger } from '../utils/hooks-ledger';
3 | import { hooksOutput as output } from '../output/hooks-output';
4 |
5 | // Create buttonStyles and divStyles here
6 | const hooksButtonStyle: CSSProperties = {
7 | display: 'inline-block',
8 | margin: '8px',
9 | marginLeft: '13px',
10 | padding: '0px',
11 | height: '25px',
12 | width: '65px',
13 | borderRadius: '4px',
14 | justifyContent: 'space-evenly',
15 | border: '1px',
16 | cursor: 'pointer',
17 | color: '#90d1f0',
18 | fontSize: '10px',
19 | };
20 |
21 | const hooksDivStyle: CSSProperties = {
22 | display: 'flex',
23 | position: 'absolute',
24 | bottom: '100px',
25 | left: '100px',
26 | backgroundColor: '#aaa',
27 | borderRadius: '4px',
28 | margin: 0,
29 | padding: 0,
30 | zIndex: 999999,
31 | };
32 |
33 | const hooksPlayStyle: CSSProperties = {
34 | boxSizing: 'border-box',
35 | marginLeft: '25px',
36 | borderStyle: 'solid',
37 | borderWidth: '7px 0px 7px 14px',
38 | };
39 |
40 | const hooksPauseStyle: CSSProperties = {
41 | width: '14px',
42 | height: '14px',
43 | borderWidth: '0px 0px 0px 10px',
44 | borderStyle: 'double',
45 | marginLeft: '27px',
46 | };
47 |
48 | export const hookStyles = { hooksButtonStyle, hooksDivStyle, hooksPlayStyle, hooksPauseStyle };
49 |
50 | export const generateHooksFile = (setHooksFile: Function): void => {
51 | return setHooksFile(URL.createObjectURL(new Blob([output(ledger)])));
52 | };
53 |
--------------------------------------------------------------------------------
/package/hooks_generator/hooks_src/api/hooks-api.ts:
--------------------------------------------------------------------------------
1 | /* useState functionality
2 | 1. User uses our useState hook in their applciation, passing in initial state and an id
3 | 2. We keep track of all changes to state in our Redux store
4 | 3. ChromogenObserver then takes data from store to be exported to our output generator files
5 | 4. Output creates file for user
6 | */
7 |
8 | /*USESTATE WITH STORE*/
9 |
10 | import { useHookedReducer } from './hooks-core-utils';
11 | import { useMemo, useContext, useState as useReactState } from 'react';
12 | import { EnhancedStore, ObserverContext } from '../utils/hooks-store';
13 |
14 | type StateAction
23 |
31 |
37 |
43 | );
44 | };
45 |
46 | export default SearchBar;
47 |
--------------------------------------------------------------------------------
/package/recoil_generator/src/utils/utils.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import type { SerializableParam } from 'recoil';
3 | import type { AtomFamilies, SelectorFamilies } from '../types';
4 | /* eslint-enable */
5 |
6 | // Debouncing for selector transaction updates
7 | export const debounce = (func: (...args: any[]) => any, wait: number) => {
8 | let timeout: any;
9 |
10 | return (...args: any[]) => {
11 | const timeoutCallback = () => {
12 | timeout = null;
13 | func(...args);
14 | };
15 |
16 | clearTimeout(timeout);
17 | timeout = setTimeout(timeoutCallback, wait);
18 | };
19 | };
20 |
21 | // Used in key-to-variable name mapping in generateFile
22 | export function convertFamilyTrackerKeys(
23 | familyTracker: AtomFamilies,
24 | storeMap: Map
38 | {searchState.results.map((result, idx) => (
39 |
42 |
33 |
36 | ) : (
37 | // Otherwise, render 'please install' message along with Github Icon
38 | chromogen
34 |
39 |
40 |
41 |
52 | );
53 | };
54 |
55 | export default App;
56 |
--------------------------------------------------------------------------------
/dev-tool/build/styles/styles.css:
--------------------------------------------------------------------------------
1 | /* General styles */
2 | html {
3 | height: 100vh;
4 | color: #d4d4d8;
5 | background-color: rgb(30, 30, 31);
6 | }
7 | body {
8 | margin: 0;
9 | padding: 0;
10 | }
11 |
12 | /* App.jsx */
13 | .App {
14 | display: grid;
15 | grid-template-rows: 33fr 33fr 33fr;
16 | font-family: 'Palanquin', sans-serif;
17 | height: 100vh;
18 | }
19 | .App div {
20 | text-align: center;
21 | font-size: 2.5rem;
22 | letter-spacing: 4px;
23 | width: 100%;
24 | text-shadow: #83beb1c2 1px 2px 0;
25 | }
26 |
27 | /* Recorder.jsx */
28 | .recorder-div {
29 | display: flex;
30 | flex-direction: row;
31 | justify-content: space-evenly;
32 | align-items: center;
33 | border-top: 2px solid #83beb1;
34 | border-bottom: 2px solid #83beb1;
35 | background-color: rgb(48, 48, 49);
36 | }
37 | #recorderBtn {
38 | border: none;
39 | box-shadow: 0px 0px 9px 0px rgba(165, 165, 165, 0.123);
40 | border-radius: 11px;
41 | background-color: rgb(30, 30, 31);
42 | color: #8ccabd;
43 | width: 200px;
44 | height: 50px;
45 | font-size: 18px;
46 | }
47 | #recorderBtn:focus {
48 | outline: none;
49 | color: #5f817a98;
50 | }
51 | #recorderBtn:hover {
52 | border: 2px solid rgb(48, 48, 49);
53 | }
54 |
55 | /* Install Chromogen render */
56 | #installContainer {
57 | display: grid;
58 | grid-template-rows: 33fr 33fr 33fr;
59 | height: 100vh;
60 | text-align: center;
61 | }
62 | #installMessage div, code, span {
63 | height: 40px;
64 | margin-top: 15px;
65 | font-size: 1.7rem;
66 | text-decoration: none;
67 | vertical-align: middle;
68 | }
69 | code {
70 | color: #8ccabd;
71 | }
72 | span {
73 | font-size: 1rem;
74 | margin-top: 5px;
75 | }
76 |
77 | /* Media queries */
78 |
79 | @media (max-width: 450px) {
80 | .recorder-div {
81 | flex-direction: column;
82 | }
83 | }
--------------------------------------------------------------------------------
/dev-tool/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chromogen-devtool",
3 | "version": "0.1.0",
4 | "description": "DevTool panel for use with Chromogen testing package",
5 | "scripts": {
6 | "build": "webpack --mode=production",
7 | "dev": "webpack --mode=development --watch"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/open-source-labs/Chromogen.git"
12 | },
13 | "contributors": [
14 | {
15 | "name": "Jim Chen",
16 | "url": "https://github.com/chenchingk"
17 | },
18 | {
19 | "name": "Andy Wang",
20 | "url": "https://github.com/andywang23"
21 | },
22 | {
23 | "name": "Connor Rose Delisle",
24 | "url": "https://github.com/connorrose"
25 | },
26 | {
27 | "name": "Michelle Holland",
28 | "url": "https://github.com/michellebholland/"
29 | }
30 | ],
31 | "license": "MIT",
32 | "bugs": {
33 | "url": "https://github.com/open-source-labs/Chromogen/issues"
34 | },
35 | "homepage": "https://github.com/open-source-labs/Chromogen#readme",
36 | "keywords": [
37 | "automated",
38 | "test",
39 | "generator",
40 | "recoil",
41 | "react",
42 | "chrome",
43 | "devtools",
44 | "extension",
45 | "interactive"
46 | ],
47 | "dependencies": {
48 | "@material-ui/core": "^4.11.0",
49 | "@material-ui/icons": "^4.9.1",
50 | "@types/chrome": "0.0.122",
51 | "@types/react": "^16.9.46",
52 | "@types/react-dom": "^16.9.8",
53 | "react": "^16.13.1",
54 | "react-dom": "^16.13.1",
55 | "recoil": "0.0.10"
56 | },
57 | "devDependencies": {
58 | "css-loader": "^4.2.1",
59 | "source-map-loader": "^1.0.1",
60 | "style-loader": "^1.2.1",
61 | "ts-loader": "^8.0.3",
62 | "typescript": "^4.0.3",
63 | "webpack": "^4.44.1",
64 | "webpack-chrome-extension-reloader": "^1.3.0",
65 | "webpack-cli": "^3.3.12"
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/demo-todo/src/components/TodoItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useRecoilState } from 'recoil';
3 | import Checkbox from '@material-ui/core/Checkbox';
4 | import { todoListState } from '../store/atoms';
5 | import '../styles/styles.css';
6 |
7 | function replaceItemAtIndex(arr, index, newValue) {
8 | return [...arr.slice(0, index), newValue, ...arr.slice(index + 1)];
9 | }
10 |
11 | function removeItemAtIndex(arr, index) {
12 | return [...arr.slice(0, index), ...arr.slice(index + 1)];
13 | }
14 |
15 | const TodoItem = ({ item }) => {
16 | const [todoList, setTodoList] = useRecoilState(todoListState);
17 | const index = todoList.findIndex((listItem) => listItem === item);
18 |
19 | const editItemText = ({ target: { value } }) => {
20 | const newList = replaceItemAtIndex(todoList, index, {
21 | ...item,
22 | text: value,
23 | });
24 | setTodoList(newList);
25 | };
26 | const toggleItemCompletion = () => {
27 | const newList = replaceItemAtIndex(todoList, index, {
28 | ...item,
29 | isComplete: !item.isComplete,
30 | });
31 | setTodoList(newList);
32 | };
33 | const deleteItem = () => {
34 | const newList = removeItemAtIndex(todoList, index);
35 | setTodoList(newList);
36 | };
37 |
38 | const checkBoxClasses = {
39 | low: 'lowPriority',
40 | medium: 'mediumPriority',
41 | high: 'highPriority',
42 | };
43 |
44 | return (
45 |
42 |
49 |
50 |
51 | Please
43 | npm install chromogen
44 | in your app before using this extension.
45 |
46 |
48 |
46 |
47 |
58 | );
59 | };
60 | export default TodoItem;
61 |
--------------------------------------------------------------------------------
/package/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chromogen",
3 | "version": "1.3.4",
4 | "description": "simple, interaction-driven Jest test generator for Recoil apps",
5 | "main": "build/index.js",
6 | "keywords": [
7 | "react",
8 | "recoil",
9 | "jest",
10 | "testing"
11 | ],
12 | "files": [
13 | "build"
14 | ],
15 | "scripts": {
16 | "prepublishOnly": "npm run build",
17 | "build": "tsc",
18 | "test": "jest --verbose --coverage",
19 | "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
20 | },
21 | "repository": {
22 | "type": "git",
23 | "url": "https://github.com/open-source-labs/Chromogen.git"
24 | },
25 | "contributors": [
26 | {
27 | "name": "Michelle Holland",
28 | "url": "https://github.com/michellebholland/"
29 | },
30 | {
31 | "name": "Jim Chen",
32 | "url": "https://github.com/chenchingk"
33 | },
34 | {
35 | "name": "Andy Wang",
36 | "url": "https://github.com/andywang23"
37 | },
38 | {
39 | "name": "Connor Rose Delisle",
40 | "url": "https://github.com/connorrose"
41 | }
42 | ],
43 | "license": "MIT",
44 | "bugs": {
45 | "url": "https://github.com/open-source-labs/Chromogen/issues"
46 | },
47 | "homepage": "https://github.com/open-source-labs/Chromogen#readme",
48 | "peerDependencies": {
49 | "jest": ">=24.0.0",
50 | "typescript": ">=3.8.0"
51 | },
52 | "dependencies": {
53 | "react": "^16.13.1",
54 | "react-dom": "^16.13.1",
55 | "react-recoil-hooks-testing-library": "0.0.8",
56 | "recoil": "0.0.13",
57 | "redux": "^4.0.5"
58 | },
59 | "devDependencies": {
60 | "@babel/core": "^7.11.6",
61 | "@babel/preset-env": "^7.11.5",
62 | "@babel/preset-react": "^7.10.4",
63 | "@babel/preset-typescript": "^7.10.4",
64 | "@testing-library/react": "^11.0.4",
65 | "@testing-library/react-hooks": "^3.4.2",
66 | "@types/node": "^14.11.2",
67 | "@types/react": "^16.9.49",
68 | "babel-jest": "^26.3.0",
69 | "coveralls": "^3.1.0",
70 | "jest": "^26.4.2",
71 | "react-test-renderer": "^16.13.1",
72 | "typescript": "^4.0.3"
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/demo-todo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chromogen-todo",
3 | "version": "1.0.0",
4 | "description": "demo todo app for Chromogen using React + Recoil",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server --open",
8 | "test": "jest --verbose"
9 | },
10 | "keywords": [
11 | "react",
12 | "recoil",
13 | "chromogen",
14 | "demo",
15 | "example",
16 | "todo"
17 | ],
18 | "repository": {
19 | "type": "git",
20 | "url": "https://github.com/open-source-labs/Chromogen.git"
21 | },
22 | "contributors": [
23 | {
24 | "name": "Michelle Holland",
25 | "url": "https://github.com/michellebholland/"
26 | },
27 | {
28 | "name": "Jim Chen",
29 | "url": "https://github.com/chenchingk"
30 | },
31 | {
32 | "name": "Andy Wang",
33 | "url": "https://github.com/andywang23"
34 | },
35 | {
36 | "name": "Connor Rose Delisle",
37 | "url": "https://github.com/connorrose"
38 | }
39 | ],
40 | "license": "MIT",
41 | "devDependencies": {
42 | "@babel/core": "^7.11.1",
43 | "@babel/plugin-transform-runtime": "^7.11.0",
44 | "@babel/preset-env": "^7.11.0",
45 | "@babel/preset-react": "^7.10.4",
46 | "@testing-library/react-hooks": "^3.4.1",
47 | "babel-loader": "^8.1.0",
48 | "css-loader": "^4.2.1",
49 | "identity-obj-proxy": "^3.0.0",
50 | "jest": "^26.4.2",
51 | "react-hot-loader": "^4.12.21",
52 | "react-recoil-hooks-testing-library": "0.0.8",
53 | "react-test-renderer": "^16.13.1",
54 | "style-loader": "^1.2.1",
55 | "webpack": "^4.44.1",
56 | "webpack-cli": "^3.3.12",
57 | "webpack-dev-server": "^3.11.0"
58 | },
59 | "peerDependencies": {
60 | "typescript": "^4.0.3"
61 | },
62 | "dependencies": {
63 | "@babel/runtime": "^7.11.2",
64 | "@material-ui/core": "^4.11.0",
65 | "@material-ui/icons": "^4.9.1",
66 | "babel-jest": "^26.3.0",
67 | "chromogen": "^1.3.4",
68 | "react": "^16.13.1",
69 | "react-dom": "^16.13.1",
70 | "recoil": "0.0.10",
71 | "typescript": "^4.0.3"
72 | },
73 | "jest": {
74 | "moduleNameMapper": {
75 | "\\.(css|less)$": "identity-obj-proxy"
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/package/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2016" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
4 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
5 | "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
6 | "declaration": true /* Generates corresponding '.d.ts' file. */,
7 | "outDir": "./build" /* Redirect output structure to the directory. */,
8 | "rootDir": "." /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
9 | "removeComments": true /* Do not emit comments to output. */,
10 | "strict": true /* Enable all strict type-checking options. */,
11 | "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
12 | "strictNullChecks": true /* Enable strict null checks. */,
13 | "strictFunctionTypes": true /* Enable strict checking of function types. */,
14 | "strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
15 | "strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
16 | "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
17 | "noUnusedLocals": true /* Report errors on unused locals. */,
18 | "noUnusedParameters": true /* Report errors on unused parameters. */,
19 | "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
20 | "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
21 | "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
22 | "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
23 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
24 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "parser": "@typescript-eslint/parser",
4 | "env": {
5 | "browser": true,
6 | "es2020": true,
7 | "jest": true
8 | },
9 | "globals": {
10 | "chrome": "readonly"
11 | },
12 | "extends": [
13 | "airbnb",
14 | "prettier",
15 | "prettier/react"
16 | ],
17 | "plugins": ["prettier"],
18 | "parserOptions": {
19 | "ecmaVersion": 2020,
20 | "sourceType": "module",
21 | "ecmaFeatures": {
22 | "jsx": true
23 | }
24 | },
25 | "rules": {
26 | "prettier/prettier": ["warn"],
27 | "arrow-body-style": ["error", "as-needed"],
28 | "default-case-last": "error",
29 | "default-param-last": ["error"],
30 | "func-style": ["off", "expression"],
31 | "no-constant-condition": "error",
32 | "no-useless-call": "error",
33 | "prefer-exponentiation-operator": "error",
34 | "prefer-regex-literals": "error",
35 | "quotes": [
36 | "error",
37 | "single",
38 | {
39 | "avoidEscape": true,
40 | "allowTemplateLiterals": false
41 | }
42 | ],
43 | "import/prefer-default-export": "off",
44 | "react/jsx-filename-extension": ["off"],
45 | "react/function-component-definition": [
46 | "error",
47 | {
48 | "namedComponents": "arrow-function",
49 | "unnamedComponents": "arrow-function"
50 | }
51 | ],
52 | "react/jsx-handler-names": [
53 | "error",
54 | {
55 | "eventHandlerPrefix": "handle",
56 | "eventHandlerPropPrefix": "on"
57 | }
58 | ],
59 | "react/jsx-key": "error",
60 | "react/jsx-no-useless-fragment": "error",
61 | "react/jsx-sort-props": [
62 | "error",
63 | {
64 | "callbacksLast": true,
65 | "shorthandFirst": true,
66 | "shorthandLast": false,
67 | "ignoreCase": true,
68 | "noSortAlphabetically": false,
69 | "reservedFirst": true
70 | }
71 | ],
72 | "react/no-adjacent-inline-elements": "error",
73 | "react/no-direct-mutation-state": "error",
74 | "react/no-multi-comp": "error",
75 | "react/prop-types": [
76 | "error",
77 | { "skipUndeclared": true }
78 | ]
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/package/hooks_generator/hooks_src/api/hooks-core-utils.ts:
--------------------------------------------------------------------------------
1 | import { Reducer, useMemo, Dispatch, useState, useEffect } from 'react';
2 | import { hooksLedger } from '../utils/hooks-ledger';
3 | import { EnhancedStore } from '../utils/hooks-store';
4 |
5 | export function useHookedReducer-
37 |
47 |
57 |
66 |
69 |
70 |
81 |
84 |
80 |
87 |
88 |
89 |
97 |
101 |
102 |
103 |
104 |
107 |
108 | );
109 | };
110 |
111 | export default TodoItemCreator;
112 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at chromogen.app@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 |
--------------------------------------------------------------------------------
/package/recoil_generator/__tests__/component.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RecoilRoot, useRecoilState } from 'recoil';
3 | import { render } from '@testing-library/react';
4 | import { ChromogenObserver } from '../src/component/ChromogenObserver.tsx';
5 | import { ledger } from '../src/utils/ledger.ts';
6 | import { atom } from '../src/api/api.ts';
7 |
8 | // import {shallow} from 'enzyme';
9 | // import {mount} from 'enzyme';
10 |
11 | describe('chromogenObserver', () => {
12 | global.URL = {
13 | createObjectURL: () => 'http://mockURL.com',
14 | };
15 |
16 | beforeEach(() => {
17 | console.error = jest.fn();
18 | // creating a mockAtom
19 | const mockAtom = atom({ key: 'mockAtom', default: true });
20 | // create a functional mockComponent
21 | const MockComponent = () => {
22 | // declaring a React Hook using mockAtom as recoilState
23 | const [mock, setMock] = useRecoilState(mockAtom);
24 | // render a mock-button that toggles mock recoilState onclick
25 | return