15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package/zustand_generator/src/types.ts:
--------------------------------------------------------------------------------
1 | // ----- EXPORTING TYPES TO BE USED IN SRC/.TSX FILES -----
2 |
3 | type NotAFunction = { [k: string]: unknown } & ({ bind?: never } | { call?: never });
4 |
5 | export type InitialRender = {
6 | [stateParam: string]: NotAFunction;
7 | };
8 |
9 | export interface Transaction
13 | setIsHidden(!isHidden)} />
14 |
15 | );
16 | };
17 |
18 | export default EditorTab;
19 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM jenkins/jenkins:2.375.3
2 | USER root
3 | RUN apt-get update && apt-get install -y lsb-release
4 | RUN curl -fsSLo /usr/share/keyrings/docker-archive-keyring.asc \
5 | https://download.docker.com/linux/debian/gpg
6 | RUN echo "deb [arch=$(dpkg --print-architecture) \
7 | signed-by=/usr/share/keyrings/docker-archive-keyring.asc] \
8 | https://download.docker.com/linux/debian \
9 | $(lsb_release -cs) stable" > /etc/apt/sources.list.d/docker.list
10 | RUN apt-get update && apt-get install -y docker-ce-cli
11 | USER jenkins
12 | RUN jenkins-plugin-cli --plugins "blueocean docker-workflow"
--------------------------------------------------------------------------------
/demo-zustand-todo/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/demo-todo/README.md:
--------------------------------------------------------------------------------
1 |
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 |
--------------------------------------------------------------------------------
/demo-todo/src/components/Quotes.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useRecoilValue, useSetRecoilState } from 'recoil';
3 | import { quoteTextState, xkcdState } from '../store/store';
4 | import { quoteNumberState } from '../store/atoms';
5 |
6 | const Quotes = () => {
7 | const setQuoteNumber = useSetRecoilState(quoteNumberState);
8 | const quoteText = useRecoilValue(quoteTextState);
9 |
10 | return (
11 | <>
12 |
13 |
18 |
19 | );
20 | };
21 |
22 | export default Quotes;
23 |
--------------------------------------------------------------------------------
/package/index.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import { atom, selector, atomFamily, selectorFamily } from './recoil_generator/src/api/api';
3 | import { ChromogenZustandObserver } from './zustand_generator/src/component/ChromogenZustandObserver';
4 | import { ChromogenObserver } from './recoil_generator/src/component/ChromogenObserver';
5 | import { chromogenZustandMiddleware } from './zustand_generator/src/api/api';
6 | import Editor from './zustand_generator/src/component/Editor';
7 |
8 | // CHROMGOEN FAMILY APIs ARE CURRENTLY UNSTABLE
9 | export {
10 | atom,
11 | selector,
12 | atomFamily,
13 | selectorFamily,
14 | ChromogenObserver,
15 | chromogenZustandMiddleware,
16 | ChromogenZustandObserver,
17 | Editor,
18 | };
19 |
--------------------------------------------------------------------------------
/package/recoil_generator/__tests__/component-utils.test.js:
--------------------------------------------------------------------------------
1 | import { ledger } from '../src/utils/ledger.ts';
2 | import {generateFile} from '../src/component/component-utils';
3 |
4 | // Testing generateFile
5 | xdescribe('generateFile', () => {
6 | const setFile = 0;
7 | const array = [[], [], []];
8 | let storeMap = new Map(array);
9 |
10 | const {
11 | atoms,
12 | selectors,
13 | setters,
14 | atomFamilies,
15 | selectorFamilies,
16 | initialRender,
17 | initialRenderFamilies,
18 | transactions,
19 | setTransactions,
20 | } = ledger;
21 |
22 | // We expect our generate file to not be the falsy return statement, which is the entirety of the ledger, with atoms being the new user input
23 | generateFile(setFile, storeMap);
24 | });
25 |
--------------------------------------------------------------------------------
/jenkins/Jenkinsfile:
--------------------------------------------------------------------------------
1 | pipeline {
2 | agent {
3 | docker {
4 | image 'node:lts-buster-slim'
5 | args '-p 3003:3003'
6 | }
7 | }
8 | environment {
9 | CI = 'true'
10 | }
11 | stages {
12 | stage('Build') {
13 | steps {
14 | sh 'npm --prefix ./package install'
15 | }
16 | }
17 | stage('Test') {
18 | steps {
19 | sh './jenkins/scripts/test.sh'
20 | }
21 | }
22 | stage('Deliver') {
23 | steps {
24 | sh './jenkins/scripts/deliver.sh'
25 | input message: 'Finished using the web site? (Click "Proceed" to continue)'
26 | sh './jenkins/scripts/kill.sh'
27 | }
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/package/zustand_generator/src/component/Buttons/RecordingButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import RecordButton from './RecordingVariations/Record';
3 | import StartButton from './RecordingVariations/Start';
4 |
5 | const RecordingButton = () => {
6 | const [isRecording, setIsRecording] = useState(true);
7 | const handleClick = () => setIsRecording(!isRecording);
8 |
9 | return (
10 | {quoteText}
14 | 17 |
19 | {isRecording ? (
20 |
25 | );
26 | };
27 |
28 | export default RecordingButton;
29 |
--------------------------------------------------------------------------------
/demo-todo/src/components/TodoQuickCheck.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useRecoilState, useRecoilValue } from 'recoil';
3 | import Checkbox from '@mui/material/Checkbox';
4 | import { allCompleteState, filteredListContentState } from '../store/store';
5 |
6 | const TodoQuickCheck = () => {
7 | const [allComplete, setAllComplete] = useRecoilState(allCompleteState);
8 | const display = useRecoilValue(filteredListContentState);
9 |
10 | return (
11 | display && (
12 |
13 | setAllComplete(!allComplete)}
19 | />
20 | all
21 |
22 | )
23 | );
24 | };
25 |
26 | export default TodoQuickCheck;
27 |
--------------------------------------------------------------------------------
/demo-zustand-todo/src/components/TodoQuickCheck.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Checkbox from '@mui/material/Checkbox';
3 | import shallow from 'zustand/shallow';
4 | import useToDoStore from '../store/store';
5 | import { useEffect } from 'react';
6 |
7 | const selector = (state) => ({
8 | setAllComplete: state.setAllComplete,
9 | checkBox: state.checkBox,
10 | setCheckBox: state.setCheckBox,
11 | });
12 |
13 | const TodoQuickCheck = () => {
14 | const { setAllComplete, checkBox, setCheckBox } = useToDoStore(selector, shallow);
15 |
16 | useEffect(() => setCheckBox());
17 |
18 | return (
19 |
20 | setAllComplete()}
26 | />
27 | All
28 |
29 | );
30 | };
31 |
32 | export default TodoQuickCheck;
33 |
--------------------------------------------------------------------------------
/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-zustand-todo/src/components/ReadOnlyTodoItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Checkbox from '@mui/material/Checkbox';
3 | import '../styles/styles.css';
4 | import useToDoStore from '../store/store';
5 |
6 | const ReadOnlyTodoItem = ({ item }) => {
7 | const checkBoxClasses = {
8 | low: 'lowPriority',
9 | medium: 'mediumPriority',
10 | high: 'highPriority',
11 | };
12 |
13 | const todoList = useToDoStore((state) => state.todoListState);
14 |
15 | return todoList.find((todo) => todo.id === item.id) ? (
16 |
17 |
18 | todo.id === item.id).isComplete}
21 | color="default"
22 | inputProps={{ 'aria-label': 'primary checkbox' }}
23 | style={{ cursor: 'default' }}
24 | />
25 |
26 | ) : null;
27 | };
28 | export default ReadOnlyTodoItem;
29 |
--------------------------------------------------------------------------------
/demo-todo/src/components/ReadOnlyTodoItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Checkbox from '@mui/material/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 |
--------------------------------------------------------------------------------
/demo-zustand-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 | test: /\.(png|jpg)$/,
37 | use: ['file-loader', 'url-loader?limit=8192'],
38 | },
39 | ],
40 | },
41 | resolve: {
42 | extensions: ['.js', '.jsx'],
43 | },
44 | };
45 |
--------------------------------------------------------------------------------
/jenkins/scripts/test.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | echo 'The following "npm" command (if executed) installs the "cross-env"'
4 | echo 'dependency into the local "node_modules" directory, which will ultimately'
5 | echo 'be stored in the Jenkins home directory. As described in'
6 | echo 'https://docs.npmjs.com/cli/install, the "--save-dev" flag causes the'
7 | echo '"cross-env" dependency to be installed as "devDependencies". For the'
8 | echo 'purposes of this tutorial, this flag is not important. However, when'
9 | echo 'installing this dependency, it would typically be done so using this'
10 | echo 'flag. For a comprehensive explanation about "devDependencies", see'
11 | echo 'https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies.'
12 | set -x
13 | npm install --save-dev cross-env
14 | set +x
15 |
16 | echo 'The following "npm" command tests that your simple Node.js/React'
17 | echo 'application renders satisfactorily. This command actually invokes the test'
18 | echo 'runner Jest (https://facebook.github.io/jest/).'
19 | set -x
20 | npm --prefix ./package run test
21 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/demo-zustand-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/zustand_generator/__tests__/api.test.js:
--------------------------------------------------------------------------------
1 | import { ledger } from '../src/utils/ledger';
2 | import { chromogenZustandMiddleware } from '../src/api/api';
3 | import { renderHook, act } from '@testing-library/react';
4 | import create from 'zustand';
5 |
6 | // testing chromogenZustandMiddleware
7 | describe('chromogenZustandMiddleware', () => {
8 | // destructuring atoms from ledger interface in utils folder
9 | it('is a function', () => {
10 | expect(typeof chromogenZustandMiddleware).toBe('function');
11 | });
12 |
13 | it('should update ledger upon invocation', () => {
14 | // creating a mock store
15 | const useStore = create(
16 | chromogenZustandMiddleware((set) => ({
17 | count: 0,
18 | increment: () => {
19 | set((state) => ({ count: count + 1 }), false, 'increment');
20 | },
21 | })),
22 | );
23 | //rendering the useStore Hook
24 | const { result } = renderHook(useStore);
25 |
26 | // verifying atoms property (array) on ledger has been updated with input atom
27 | expect(result.current.count).toStrictEqual(0);
28 | expect(ledger.initialRender).toStrictEqual({ count: 0 });
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/demo-zustand-todo/src/components/Quotes.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import shallow from 'zustand/shallow';
3 | import useToDoStore from '../store/store';
4 | import { useEffect } from 'react';
5 |
6 | const selector = (state) => ({
7 | changeQuoteText: state.changeQuoteText,
8 | quoteText: state.quoteText,
9 | });
10 |
11 | const Quotes = () => {
12 | const { changeQuoteText, quoteText } = useToDoStore(selector, shallow);
13 |
14 | const fetchMe = () => {
15 | let randomNum = Math.floor(Math.random() * 1643);
16 |
17 | fetch('https://type.fit/api/quotes')
18 | .then((response) => response.json())
19 | .then((data) => {
20 | const quote = data[randomNum];
21 | changeQuoteText(`"${quote.text}"\n\t- ${quote.author || 'unknown'}`);
22 | })
23 | .catch((err) => {
24 | console.error(err);
25 | return 'No quote available';
26 | });
27 | };
28 |
29 | useEffect(() => fetchMe(), []);
30 |
31 | return (
32 | <>
33 |
34 |
37 |
38 | );
39 | };
40 |
41 | export default Quotes;
42 |
--------------------------------------------------------------------------------
/package/zustand_generator/src/component/Numbers.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const listStyle: React.CSSProperties = {
4 | paddingBlock: '28px',
5 | display: 'flex',
6 | flexDirection: 'column',
7 | alignContent: 'flex-end',
8 | textAlign: 'end',
9 | background: '#1c1c1c',
10 | paddingInline: '16px',
11 | border: '1px solid #1c1c1c',
12 | height: 'auto',
13 | width: '60px',
14 | };
15 |
16 | const numberStyle: React.CSSProperties = {
17 | fontSize: 12,
18 | color: '#747478',
19 | fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo,monospace',
20 | };
21 |
22 | const unique = (val: number | string) => (
23 | {quoteText}
35 | fetchMe()}>New Quote 36 |24 | {val} 25 |
26 | ); 27 | 28 | const numerous = (num = 1000) => { 29 | let pointer: number = 1; 30 | let allNumbers: JSX.Element[] = []; 31 | 32 | while (pointer < num) { 33 | allNumbers = [...allNumbers, unique(pointer)]; 34 | pointer++; 35 | } 36 | 37 | console.log(allNumbers); 38 | 39 | return allNumbers; 40 | }; 41 | 42 | const NumberList = ({ number }): JSX.Element =>{numerous(number)}
;
43 |
44 | export default NumberList;
45 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/jenkins/scripts/deliver.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | echo 'The following "npm" command builds your Node.js/React application for'
4 | echo 'production in the local "build" directory (i.e. within the'
5 | echo '"/var/jenkins_home/workspace/simple-node-js-react-app" directory),'
6 | echo 'correctly bundles React in production mode and optimizes the build for'
7 | echo 'the best performance.'
8 | set -x
9 | npm run build
10 | set +x
11 |
12 | echo 'The following "npm" command runs your Node.js/React application in'
13 | echo 'development mode and makes the application available for web browsing.'
14 | echo 'The "npm start" command has a trailing ampersand so that the command runs'
15 | echo 'as a background process (i.e. asynchronously). Otherwise, this command'
16 | echo 'can pause running builds of CI/CD applications indefinitely. "npm start"'
17 | echo 'is followed by another command that retrieves the process ID (PID) value'
18 | echo 'of the previously run process (i.e. "npm start") and writes this value to'
19 | echo 'the file ".pidfile".'
20 | set -x
21 | npm --prefix ./package run symlink &
22 | sleep 1
23 | echo $! > .pidfile
24 | set +x
25 |
26 | echo 'Now...'
27 | echo 'Visit http://localhost:3003 to see your Node.js/React application in action.'
28 | echo '(This is why you specified the "args ''-p 3003:3003''" parameter when you'
29 | echo 'created your initial Pipeline as a Jenkinsfile..)'
30 |
--------------------------------------------------------------------------------
/package/zustand_generator/src/component/ChromogenZustandObserver.tsx:
--------------------------------------------------------------------------------
1 | import Editor from './Editor';
2 | import EditorTab from './EditorTab';
3 | import React, { useState } from 'react';
4 | import { generateTests } from './component-utils';
5 | import GlobalStyle from '../GlobalStyle';
6 |
7 | const panel: React.CSSProperties = {
8 | display: 'flex',
9 | position: 'relative',
10 | // width: '531.49px'
11 | };
12 |
13 | interface Props {
14 | children: JSX.Element;
15 | }
16 |
17 | export const ChromogenZustandObserver: React.FC
18 | Loading...}>
19 |
21 |
22 |
23 |
24 |
36 |
37 | Totally Todos!
25 | 26 |
27 |
34 |
36 | {children}
37 | {isHidden ? (
38 |
44 | );
45 | };
46 |
--------------------------------------------------------------------------------
/demo-zustand-todo/src/components/TodoItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Checkbox from '@mui/material/Checkbox';
3 | import '../styles/styles.css';
4 | import shallow from 'zustand/shallow';
5 | import useToDoStore from '../store/store';
6 |
7 | const selector = (state) => ({
8 | todoListState: state.todoListState,
9 | deleteTodoListItem: state.deleteTodoListItem,
10 | editItemText: state.editItemText,
11 | toggleItemCompletion: state.toggleItemCompletion,
12 | });
13 |
14 | const TodoItem = ({ item }) => {
15 | const { deleteTodoListItem, editItemText, toggleItemCompletion } = useToDoStore(
16 | selector,
17 | shallow,
18 | );
19 |
20 | const checkBoxClasses = {
21 | low: 'lowPriority',
22 | medium: 'mediumPriority',
23 | high: 'highPriority',
24 | };
25 |
26 | return (
27 |
28 | editItemText(e.target.value, item.id)}
32 | />
33 | toggleItemCompletion(item.id)}
39 | />
40 |
43 |
44 | );
45 | };
46 | export default TodoItem;
47 |
--------------------------------------------------------------------------------
/package/zustand_generator/src/component/Resizing/Resizer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import styled from 'styled-components';
3 |
4 | const ResizerStyle = styled.div`
5 | position: absolute;
6 | cursor: ew-resize;
7 | width: 2px;
8 | height: 100%;
9 | z-index: 1;
10 | left: -1;
11 | top: 0;
12 | &:hover {
13 | background: #4848be;
14 | }
15 | `;
16 |
17 | interface ResizerProps {
18 | onResize: Function;
19 | }
20 |
21 | const Resizer: React.FC
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 |
29 |
37 |
47 |
53 | );
54 | };
55 |
56 | export default SearchBar;
57 |
--------------------------------------------------------------------------------
/demo-todo/src/components/TodoItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useRecoilState } from 'recoil';
3 | import Checkbox from '@mui/material/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 |
48 | {searchResults.results.map((result, idx) => (
49 |
52 |
46 |
47 |
58 | );
59 | };
60 | export default TodoItem;
61 |
--------------------------------------------------------------------------------
/package/zustand_generator/src/component/Editor.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import CodeEditor from '@uiw/react-textarea-code-editor';
3 | import NumberList from './Numbers';
4 | import { Header } from './Header';
5 | import RecordingButton from './Buttons/RecordingButton';
6 |
7 | const editorStyle: React.CSSProperties = {
8 | display: 'flex',
9 | flexDirection: 'column',
10 | height: '100%',
11 | overflow: 'auto',
12 | borderLeft: '1px solid rgba(243,246,248,.1)',
13 | backgroundColor: '#1C1C1C',
14 | width: '50vw',
15 | };
16 | const codePanel: React.CSSProperties = {
17 | display: 'flex',
18 | // flexGrow: 1,
19 | overflowY: 'scroll',
20 | height: 'calc(100vh - 56px)',
21 | };
22 |
23 | interface Props {
24 | code: string;
25 | setIsHidden: Function;
26 | isHidden: boolean;
27 | }
28 | const Editorfield = ({ code, isHidden, setIsHidden }: Props): JSX.Element => {
29 | const [, setInnerCode] = useState(code);
30 | let breakLine = 0;
31 |
32 | for (let curr = 0; curr < code.length; curr++) {
33 | if (code[curr] == '\n') breakLine++;
34 | }
35 |
36 | console.log(breakLine);
37 |
38 | return (
39 |
40 |
64 | );
65 | };
66 |
67 | export default Editorfield;
68 |
--------------------------------------------------------------------------------
/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": "NODE_OPTIONS=--experimental-vm-modules npx 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.19.1",
45 | "@babel/preset-react": "^7.10.4",
46 | "@testing-library/react": "^13.1.1",
47 | "babel-loader": "^8.1.0",
48 | "chromogen": "^4.0.4",
49 | "css-loader": "^4.2.1",
50 | "identity-obj-proxy": "^3.0.0",
51 | "jest": "^26.4.2",
52 | "style-loader": "^1.2.1",
53 | "webpack": "^5.74.0",
54 | "webpack-cli": "^3.3.12",
55 | "webpack-dev-server": "^4.11.1"
56 | },
57 | "peerDependencies": {
58 | "typescript": "^4.0.3"
59 | },
60 | "dependencies": {
61 | "@babel/runtime": "^7.11.2",
62 | "@emotion/react": "^11.10.4",
63 | "@emotion/styled": "^11.10.4",
64 | "@mui/icons-material": "^5.10.6",
65 | "@mui/material": "^5.10.6",
66 | "babel-jest": "^26.3.0",
67 | "react": "^18.0.0",
68 | "react-dom": "^18.0.0",
69 | "react-recoil-hooks-testing-library": "^0.1.0",
70 | "react-test-renderer": "^18.1.0",
71 | "recoil": "0.7.2",
72 | "typescript": "^4.0.3"
73 | },
74 | "jest": {
75 | "moduleNameMapper": {
76 | "\\.(css|less)$": "identity-obj-proxy"
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/package/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES6" /* 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": false /* 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 | // "include": ["package/**/*"]
27 | }
--------------------------------------------------------------------------------
/package/zustand_generator/src/component/Buttons/RecordingVariations/Start.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | const Start = (props): JSX.Element => {
4 | //hover
5 | const [isHover, setIsHover] = useState(false);
6 | const handleMouseEnter = () => {
7 | setIsHover(true);
8 | };
9 | const handleMouseLeave = () => {
10 | setIsHover(false);
11 | };
12 |
13 | const startButtonShape: React.CSSProperties = {
14 | display: 'flex',
15 | width: '252px',
16 | flexDirection: 'row',
17 | alignItems: 'center',
18 | position: 'absolute',
19 | justifyContent: 'center',
20 | height: '48px',
21 | // left: '1482px',
22 | // top: '1081px',
23 | borderRadius: '42px',
24 | padding: '14px 24px',
25 | columnGap: '16px',
26 | background: '#212121',
27 | border: '1px solid rgba(243, 246, 248, 0.1)',
28 | cursor: 'pointer',
29 | bottom: '20px',
30 | };
31 |
32 | const startButtonHover: React.CSSProperties = {
33 | display: 'flex',
34 | flexDirection: 'row',
35 | alignItems: 'center',
36 | position: 'absolute',
37 | width: '252px',
38 | height: '48px',
39 | borderRadius: '42px',
40 | padding: '14px 24px',
41 | columnGap: '16px',
42 | justifyContent: 'center',
43 | background: '#1C1C1C',
44 | border: '1px solid rgba(243, 246, 248, 0.1)',
45 | cursor: 'pointer',
46 | bottom: '20px',
47 | };
48 |
49 | const startIcon: React.CSSProperties = {
50 | width: '0',
51 | height: '0',
52 | borderTop: '8px solid transparent',
53 | borderBottom: '8px solid transparent',
54 | borderLeft: '16px solid rgba(243, 246, 248, 0.8)',
55 | flex: 'none',
56 | order: '0',
57 | flexGrow: '0',
58 | borderRadius: '2px',
59 | };
60 |
61 | const startText: React.CSSProperties = {
62 | fontSize: '14px',
63 | lineHeight: '16px',
64 | color: '#F3F6F8',
65 | opacity: '0.8',
66 | flex: 'none',
67 | order: '1',
68 | flexGrow: '0',
69 | };
70 |
71 | return (
72 |
81 | );
82 | };
83 |
84 | export default Start;
85 |
--------------------------------------------------------------------------------
/package/recoil_generator/src/api/family-utils.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import type { SerializableParam } from 'recoil';
3 |
4 | import { ledger } from '../utils/ledger';
5 | import { dummyParam } from '../utils/utils';
6 | import { recordingState } from '../utils/store';
7 | import { debouncedAddToTransactions } from './core-utils';
8 | /* eslint-enable */
9 |
10 | const { transactions, selectorFamilies, initialRenderFamilies, setTransactions } = ledger;
11 |
12 | export const wrapFamilyGetter = (key: string, configGet: Function) => {
13 | let returnedPromise = false;
14 |
15 | return (params: SerializableParam) => (utils: any) => {
16 | const { get } = utils;
17 | const value = configGet(params)(utils);
18 | // Only capture selector data if currently recording
19 |
20 | if (get(recordingState)) {
21 | if (transactions.length === 0) {
22 | // Promise-validation is expensive, so we only do it once, on initial load
23 | if (
24 | typeof value === 'object'
25 | && value !== null
26 | && Object.prototype.toString.call(value) === '[object Promise]'
27 | ) {
28 | delete selectorFamilies[key];
29 | returnedPromise = true;
30 | } else {
31 | initialRenderFamilies.push({ key, params, value });
32 | }
33 | } else if (!returnedPromise) {
34 | // Track every new params
35 | if (!selectorFamilies[key].prevParams.has(params)) {
36 | selectorFamilies[key].prevParams.add(params);
37 | }
38 | // Debouncing allows TransactionObserver to push to array first
39 | // Length must be computed within debounce to correctly find last transaction
40 | // Excluding dummy selector created by ChromogenObserver's onload useEffect hook
41 | if (params !== dummyParam) debouncedAddToTransactions(key, value, params);
42 | }
43 | }
44 |
45 | // Return value from original get method
46 | return value;
47 | };
48 | };
49 |
50 | export const wrapFamilySetter = (key: string, set: Function) => (params: SerializableParam) => (
51 | utils: any,
52 | newValue: any,
53 | ) => {
54 | if (utils.get(recordingState) && setTransactions.length > 0) {
55 | // allow TransactionObserver to push to array first
56 | // Length must be computed after timeout to correctly find last transaction
57 | setTimeout(() => {
58 | setTransactions[setTransactions.length - 1].setter = { key, params, newValue };
59 | }, 0);
60 | }
61 | return set(params)(utils, newValue);
62 | };
63 |
--------------------------------------------------------------------------------
/package/recoil_generator/__tests__/utils.test.js:
--------------------------------------------------------------------------------
1 | import { debounce, convertFamilyTrackerKeys } from '../src/utils/utils.ts';
2 |
3 | jest.useFakeTimers();
4 |
5 | describe('debounce', () => {
6 | it('should return a new function', () => {
7 | // declare mock function that returns a string
8 | const inputFunction = () => 'example';
9 | // declare a function that stores the evaluated result of invoking debounce on inputFunction with a wait time of 0s
10 | const outputFunction = debounce(inputFunction, 0);
11 | // verify that outputFunction is a function
12 | expect(typeof outputFunction).toBe('function');
13 | // verify that that the 'debounced function' (outputFunction) is different than the parameter function (inputFunction)
14 | expect(outputFunction).not.toBe(inputFunction);
15 | });
16 |
17 | it('should limit consecutive calls', () => {
18 | // increment count to 1 after 100ms
19 | let count = 0;
20 | const increment = debounce(() => {
21 | count += 1;
22 | }, 100);
23 | // invoke increment twice
24 | increment();
25 | increment();
26 | // advance timer to 101ms using a mock jest function
27 | jest.advanceTimersByTime(101);
28 | // verify that count only incremented once because it was debounced
29 | expect(count).toEqual(1);
30 | });
31 | });
32 |
33 | // testing convertFamilyTrackerKeys
34 | describe('convertFamilyTrackerKeys', () => {
35 | it('should update key names if in map', () => {
36 | // create mock tracker (object)
37 | const newTracker = convertFamilyTrackerKeys(
38 | // first parameter is an object with a property whose value is a string
39 | { keyOne: 'some value' },
40 | // second parameter is a new Map
41 | new Map([['keyOne', 'keyUpdated']]),
42 | );
43 | // verify that newTracker object includes property from Map (keyUpdated)
44 | expect(newTracker).toHaveProperty('keyUpdated');
45 | // verify that newTracker did not update key name with first parameter
46 | expect(newTracker).not.toHaveProperty('keyOne');
47 | });
48 |
49 | it('should preserve key names if not in map', () => {
50 | // create mock tracker (object)
51 | const newTracker = convertFamilyTrackerKeys(
52 | { keyOne: 'some value' },
53 | new Map([['keyTwo', 'keyNotUpdated']]),
54 | );
55 | // verify that newTracker's first parameter has been preserved
56 | expect(newTracker).toHaveProperty('keyOne');
57 | // verify that newTracker does have keyTwo in first parameter
58 | expect(newTracker).not.toHaveProperty('keyTwo');
59 | });
60 | });
61 |
--------------------------------------------------------------------------------
/package/zustand_generator/src/component/component-utils.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import type { CSSProperties } from 'react';
3 | // import type { SerializableParam } from 'recoil';
4 | import type { Ledger } from '../types';
5 |
6 | import { ledger } from '../utils/ledger';
7 | import { output } from '../output/output';
8 | /* eslint-enable */
9 |
10 | const buttonStyle: CSSProperties = {
11 | display: 'inline-block',
12 | margin: '8px',
13 | marginLeft: '13px',
14 | padding: '0px',
15 | height: '25px',
16 | width: '65px',
17 | borderRadius: '4px',
18 | justifyContent: 'space-evenly',
19 | border: '1px',
20 | cursor: 'pointer',
21 | color: '#90d1f0',
22 | fontSize: '10px',
23 | };
24 |
25 | const divStyle: CSSProperties = {
26 | display: 'flex',
27 | position: 'relative',
28 | height: '100%',
29 | top: '0px',
30 | right: '0px',
31 | bottom: '0px',
32 | width: '30vw',
33 | backgroundColor: '#222222',
34 | borderRadius: '4px',
35 | margin: 0,
36 | padding: 0,
37 | zIndex: 999999,
38 | };
39 |
40 | const playStyle: CSSProperties = {
41 | boxSizing: 'border-box',
42 | marginLeft: '25px',
43 | borderStyle: 'solid',
44 | borderWidth: '7px 0px 7px 14px',
45 | };
46 |
47 | const pauseStyle: CSSProperties = {
48 | width: '14px',
49 | height: '14px',
50 | borderWidth: '0px 0px 0px 10px',
51 | borderStyle: 'double',
52 | marginLeft: '27px',
53 | };
54 |
55 | export const styles = { buttonStyle, divStyle, playStyle, pauseStyle };
56 |
57 | /*
58 | generateFile generates test file & sets download URL
59 | The passed in setFile function updates _file_ state in Chromogen observer
60 | Applying only at point-of-download keeps performance cost low for users who
61 | don't need to pass nodes while creating a moderate performance hit for others
62 | only while downloading, never while interacting with their app.
63 | */
64 | export const generateFile = (setFile: Function, storeMap: Map
42 | setInnerCode(evn.target.value)}
49 | padding={15}
50 | style={{
51 | maxWidth: 1000,
52 | width: 'calc(100% - 60px)',
53 | maxHeight: '100vh',
54 | overflow: 'visible',
55 | fontSize: 12,
56 | backgroundColor: '#1c1c1c',
57 | fontFamily:
58 | 'ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo,monospace',
59 | }}
60 | />
61 |
62 |
43 |
71 | );
72 | };
73 |
74 | export default TodoList;
75 |
--------------------------------------------------------------------------------
/package/recoil_generator/src/output/output.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import type { Ledger } from '../types';
3 | import type { SerializableParam } from 'recoil';
4 | import {
5 | importRecoilState,
6 | writeableHook,
7 | readableHook,
8 | returnWriteable,
9 | returnReadable,
10 | testSelectors,
11 | testSetters,
12 | importRecoilFamily,
13 | atomFamilyHook,
14 | selectorFamilyHook,
15 | returnSelectorFamily,
16 | initializeSelectors,
17 | returnAtomFamily,
18 | } from './output-utils';
19 |
20 | /* eslint-enable */
21 |
22 | /* ----- HELPERS ----- */
23 | export const setFilter = (selectors: string[], setters: string[]): string[] =>
24 | selectors.filter((key) => !setters.includes(key));
25 |
26 | /* ----- MAIN ----- */
27 | export const output = ({
28 | atoms,
29 | selectors,
30 | setters,
31 | atomFamilies,
32 | selectorFamilies,
33 | initialRender,
34 | transactions,
35 | setTransactions,
36 | }: Ledger
44 |
45 | 
50 |
51 |
70 |
50 |
52 | Loading...}>
53 |
55 |
56 |
57 |
67 | To-Do List
58 |
59 |
66 |
52 |
59 |
60 |
61 |
69 |
73 |
74 |
75 |
76 |
79 |
80 | );
81 | };
82 |
83 | export default TodoItemCreator;
84 |
--------------------------------------------------------------------------------
/demo-todo/src/components/TodoItemCreator.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/jsx-props-no-spreading */
2 | import React, { useState } from 'react';
3 | import RadioGroup from '@mui/material/RadioGroup';
4 | import FormControlLabel from '@mui/material/FormControlLabel';
5 | import FormControl from '@mui/material/FormControl';
6 | import FormLabel from '@mui/material/FormLabel';
7 | import Radio from '@mui/material/Radio';
8 | import { useSetRecoilState } from 'recoil';
9 | import { todoListState } from '../store/atoms';
10 |
11 | // utility for creating unique Id
12 | let id = 0;
13 | const getId = () => {
14 | id += 1;
15 | return id;
16 | };
17 |
18 | const TodoItemCreator = () => {
19 | const [inputValue, setInputValue] = useState('');
20 | const [priorityValue, setPriorityValue] = useState('low');
21 | const setTodoList = useSetRecoilState(todoListState);
22 |
23 | const addItem = () => {
24 | setTodoList((oldTodoList) => [
25 | ...oldTodoList,
26 | {
27 | id: getId(),
28 | text: inputValue,
29 | priority: priorityValue,
30 | isComplete: false,
31 | },
32 | ]);
33 | setInputValue('');
34 | setPriorityValue('low');
35 | };
36 |
37 | const onChange = ({ target: { value } }) => {
38 | setInputValue(value);
39 | };
40 |
41 | const handleChange = (event) => {
42 | setPriorityValue(event.target.value);
43 | };
44 |
45 | /* MUI Radio Button styles */
46 | const GreenRadio = (props) =>
54 |
61 |
62 |
63 |
71 |
75 |
76 |
77 |
78 |
81 |
82 | );
83 | };
84 |
85 | export default TodoItemCreator;
86 |
--------------------------------------------------------------------------------
/package/recoil_generator/src/api/core-utils.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import { debounce } from '../utils/utils';
3 | import { ledger } from '../utils/ledger';
4 | import { recordingState } from '../utils/store';
5 | /* eslint-enable */
6 |
7 | const { transactions, initialRender, selectors, setTransactions } = ledger;
8 |
9 | const DEBOUNCE_MS = 250;
10 |
11 | // Set timeout for selector get calls
12 | const debouncedAddToTransactions = debounce(
13 | (key, value, params) =>
14 | params !== undefined
15 | ? transactions[transactions.length - 1].familyUpdates.push({ key, value, params })
16 | : transactions[transactions.length - 1].updates.push({ key, value }),
17 | DEBOUNCE_MS,
18 | );
19 |
20 | // the logic for recording selectors only when they fire
21 | // whenever get method is fired, chromogen records
22 | const wrapGetter = (key: string, get: Function) => {
23 | let returnedPromise: boolean = false;
24 |
25 | return (utils: any) => {
26 | //will return what normal recoil selector will return aka regular selector method
27 | const value = get(utils);
28 |
29 | //Checking whether value is async
30 | // Only capture selector data if currently recording (if record button has been hit)
31 | if (utils.get(recordingState)) {
32 | //making sure no transactions have been fired
33 | if (transactions.length === 0) {
34 | // Promise-validation is expensive, so we only do it once, on initial load
35 | if (typeof value === 'object' && value !== null && value.constructor.name === 'Promise') {
36 | ledger.selectors = selectors.filter((current) => current !== key);
37 | returnedPromise = true;
38 | } else {
39 | initialRender.push({ key, value });
40 | }
41 | } else if (!returnedPromise) {
42 | // Debouncing (throttling) allows TransactionObserver to push to array first
43 | // Length must be computed within debounce to correctly find last transaction
44 | // only capture meaningful function calls
45 | // when called, timer starts; if x amount of time passes and function isnt called again, it fires; if called, resets timer
46 | debouncedAddToTransactions(key, value);
47 | }
48 | }
49 |
50 | return value;
51 | };
52 | };
53 |
54 | const wrapSetter = (key: string, set: Function) => (utils: any, newValue: any) => {
55 | if (utils.get(recordingState) && setTransactions.length > 0) {
56 | // allow TransactionObserver to push to array first
57 | // Length must be computed after timeout to correctly find last transaction
58 | // this is here b/c of async stuff with useRecoilTransactionObserver
59 | setTimeout(() => {
60 | setTransactions[setTransactions.length - 1].setter = { key, newValue };
61 | }, 0);
62 | }
63 | // returns what regular selector would return (?)
64 | return set(utils, newValue);
65 | };
66 |
67 | export {debouncedAddToTransactions, wrapGetter, wrapSetter};
--------------------------------------------------------------------------------
/demo-zustand-todo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chromogen-todo",
3 | "version": "1.0.2",
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 | "update": " npm run uninstall && npm run install && npm run start",
10 | "uninstall": "npm uninstall chromogen",
11 | "install": "npm install ../package",
12 | "buildPackage": "tsc",
13 | "tarballUpdate": "npm --prefix ../package run build && npm pack ../package && npm uninstall chromogen && npm install ./chromogen-5.0.1.tgz && npm start"
14 | },
15 | "keywords": [
16 | "react",
17 | "recoil",
18 | "chromogen",
19 | "demo",
20 | "example",
21 | "todo"
22 | ],
23 | "repository": {
24 | "type": "git",
25 | "url": "https://github.com/open-source-labs/Chromogen.git"
26 | },
27 | "contributors": [
28 | {
29 | "name": "Brach Burdick",
30 | "url": "https://github.com/sirbrachthepale/"
31 | },
32 | {
33 | "name": "Francois Denavaut",
34 | "url": "https://github.com/dnvt/"
35 | },
36 | {
37 | "name": "Maggie Kwan",
38 | "url": "https://github.com/maggiekwan/"
39 | },
40 | {
41 | "name": "Lawrence Liang",
42 | "url": "https://github.com/Lawliang/"
43 | },
44 | {
45 | "name": "Michelle Holland",
46 | "url": "https://github.com/michellebholland/"
47 | },
48 | {
49 | "name": "Jim Chen",
50 | "url": "https://github.com/chenchingk"
51 | },
52 | {
53 | "name": "Andy Wang",
54 | "url": "https://github.com/andywang23"
55 | },
56 | {
57 | "name": "Connor Rose Delisle",
58 | "url": "https://github.com/connorrose"
59 | }
60 | ],
61 | "license": "MIT",
62 | "devDependencies": {
63 | "@babel/core": "^7.11.1",
64 | "@babel/plugin-transform-runtime": "^7.11.0",
65 | "@babel/preset-env": "^7.11.0",
66 | "@babel/preset-react": "^7.10.4",
67 | "@testing-library/react": "^13.1.1",
68 | "babel-loader": "^8.1.0",
69 | "css-loader": "^4.2.1",
70 | "identity-obj-proxy": "^3.0.0",
71 | "jest": "^26.4.2",
72 | "prettier": "^2.7.1",
73 | "style-loader": "^1.2.1",
74 | "webpack": "^4.44.1",
75 | "webpack-cli": "^3.3.12",
76 | "webpack-dev-server": "^3.11.0"
77 | },
78 | "peerDependencies": {
79 | "typescript": "^4.0.3"
80 | },
81 | "dependencies": {
82 | "@babel/runtime": "^7.11.2",
83 | "@emotion/react": "^11.10.5",
84 | "@emotion/styled": "^11.10.4",
85 | "@mui/icons-material": "^5.10.6",
86 | "@mui/material": "^5.10.6",
87 | "babel-jest": "^26.3.0",
88 | "chromogen": "file:chromogen-4.0.4.tgz",
89 | "file-loader": "^6.2.0",
90 | "react": "^18.0.0",
91 | "react-dom": "^18.0.0",
92 | "react-test-renderer": "^18.1.0",
93 | "recoil": "0.7.5",
94 | "typescript": "^4.0.3",
95 | "url-loader": "^4.1.1",
96 | "zustand": "^4.1.1"
97 | },
98 | "jest": {
99 | "moduleNameMapper": {
100 | "\\.(css|less)$": "identity-obj-proxy"
101 | }
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/package/recoil_generator/__tests__/api.test.js:
--------------------------------------------------------------------------------
1 | import { ledger } from '../src/utils/ledger.ts';
2 | import { atom, selector, selectorFamily, atomFamily } from '../src/api/api.ts';
3 |
4 | // testing the atom
5 | describe('atom', () => {
6 | // destructuring atoms from ledger interface in utils folder
7 | const { atoms } = ledger;
8 | it('is a function', () => {
9 | expect(typeof atom).toBe('function');
10 | });
11 |
12 | it('should update ledger upon invocation', () => {
13 | // creating a mock atom
14 | atom({
15 | key: 'exampleAtom',
16 | default: false,
17 | });
18 | // verifying atoms property (array) on ledger has been updated with input atom
19 | expect(atoms).toHaveLength(1);
20 | });
21 |
22 | it('should create Recoil atom with correct key name', () => {
23 | // verifying that input atom key matches 'exampleAtom'
24 | expect(atoms[0]).toHaveProperty('key', 'exampleAtom');
25 | });
26 | });
27 |
28 | describe('selector', () => {
29 | // destructuring selectors from ledger object in utils folder
30 | const { selectors } = ledger;
31 | const test = true;
32 |
33 | it('is a function', () => {
34 | // verify selector is a function
35 | expect(typeof selector).toBe('function');
36 | });
37 |
38 | it('should update ledger upon invocation', () => {
39 | // creating a mock selector with key, get, set
40 | selector({
41 | key: 'exampleSelector',
42 | get: () => 'getMethod',
43 | set: () => 'setMethod',
44 | });
45 | // verify selectors property in ledger has been updated with mock selector
46 | expect(selectors).toHaveLength(1);
47 | });
48 | // verifying that input selector key matches 'exampleSelector'
49 | it('should capture correct key name', () => {
50 | expect(selectors[0]).toEqual('exampleSelector');
51 | });
52 |
53 | xit('should return an object if an input condition evaluates to true', () => {
54 | // verify that selector (recoilSelector in this context) invocation returns an object
55 | expect(typeof selector(test)).toBe('object');
56 | });
57 | });
58 |
59 | describe('atomFamily', () => {
60 | it('should return a function', () => {
61 | // create a mock atomFamily
62 | const familyFactory = atomFamily({
63 | key: 'familyKey',
64 | default: (param) => param.toString(),
65 | });
66 | // verify that familyFactory is a function
67 | expect(typeof familyFactory).toEqual('function');
68 | });
69 | });
70 |
71 | describe('selectorFamily', () => {
72 | // truthy parameter
73 | const test = true;
74 | it('should return a function', () => {
75 | // create a mock selectorFamily
76 | const familyFactory = selectorFamily({
77 | key: 'familyKey',
78 | get: () => () => 'some value',
79 | set: () => () => undefined,
80 | default: (param) => param.toString(),
81 | });
82 | // verify that familyFactory is a function
83 | expect(typeof familyFactory).toEqual('function');
84 | });
85 | it('should return an object if an input condition evaluates to true', () => {
86 | // verify that selectorFamily (recoilSelectorFamily in this context) invocation returns an object
87 | expect(typeof selectorFamily(test)).toBe('function');
88 | });
89 | });
90 |
--------------------------------------------------------------------------------
/package/recoil_generator/src/types.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import type {
3 | RecoilState,
4 | RecoilValue,
5 | DefaultValue,
6 | SerializableParam,
7 | RecoilValueReadOnly,
8 | } from 'recoil';
9 | /* eslint-enable */
10 |
11 | // ----- INITIALIZING NON-IMPORTABLE RECOIL TYPES -----
12 | type ResetRecoilState = (recoilVal: RecoilState-
37 |
47 |
57 |
66 |
69 |
70 |
81 |
84 |