diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index 22fb319f..00000000 --- a/.storybook/main.js +++ /dev/null @@ -1,31 +0,0 @@ -const path = require("path"); - -module.exports = { - stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], - addons: ["@storybook/addon-links", "@storybook/addon-essentials"], - webpackFinal: async (config) => { - config.resolve.modules = [ - ...(config.resolve.modules || []), - path.resolve(__dirname, "../src"), - ]; - - // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code. - config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]; - // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7) - config.module.rules[0].use[0].loader = require.resolve("babel-loader"); - // use @babel/preset-react for JSX and env (instead of staged presets) - config.module.rules[0].use[0].options.presets = [ - require.resolve("@babel/preset-react"), - require.resolve("@babel/preset-env"), - ]; - config.module.rules[0].use[0].options.plugins = [ - // use @babel/plugin-proposal-class-properties for class arrow functions - require.resolve("@babel/plugin-proposal-class-properties"), - // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook - require.resolve("babel-plugin-remove-graphql-queries"), - ]; - // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint - config.resolve.mainFields = ["browser", "module", "main"]; - return config; - }, -}; diff --git a/.storybook/preview.js b/.storybook/preview.js deleted file mode 100644 index 43b2d7c7..00000000 --- a/.storybook/preview.js +++ /dev/null @@ -1,19 +0,0 @@ -import { ThemeProvider } from "styled-components"; -import theme from "../src/theme"; -import "../src/theme/typography.css"; - -function Theming({ children }) { - return {children}; -} - -export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, -}; - -export const decorators = [ - (Story) => ( - - - - ), -]; diff --git a/.storybook/styles.css b/.storybook/styles.css deleted file mode 100644 index 2c1c90c6..00000000 --- a/.storybook/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -@import "~antd/dist/antd.css"; - -.ant-message { - bottom: 0; - right: 0; - display: flex; - justify-content: flex-end; - align-items: flex-end; -} diff --git a/README.md b/README.md index 2452d299..6d7bbc89 100644 --- a/README.md +++ b/README.md @@ -15,18 +15,10 @@ ## Repo Structure -### .storybook - -Contains setup files for [Storybook](https://storybook.js.org/), a solution for viewing components without surrounding app context. - ### build [.gitignore] After building the app, the files are located here. -### cypress - -Contains end-to-end test suites and set up files for [Cypress](https://www.cypress.io/), our browser integration testing engine. - ### data Contains markdown files that are compiled at build time to `src/data.json`, where it is consumed and turned into UI components. @@ -51,15 +43,14 @@ Contains the configuration logic for the socket server's webpack build, as well ### Tools of Choice -| TOOL | LEARN MORE | WHAT IT'S FOR | -| ---------------- | ------------------------------- | ---------------------------------------------------------------------------------------- | -| Create-React-App | https://create-react-app.dev/ | React is a view library for creating components. | -| Redux | https://redux.js.org/ | Redux is a library for handling state managements. | -| React-Redux | https://react-redux.js.org/ | React-Redux connects a React app with a Redux data store. | -| Redux Toolkit | https://redux-toolkit.js.org/ | Redux Toolkit is an opinion toolset and pattern for Redux. | -| Ant Design | https://ant.design/ | Ant Design is a UI framework that contains React components. | -| Storybook | https://storybook.js.org/ | Storybook allows developers to view components in isolation. | -| Cypress | https://cypress.io/ | Cypress is an end-to-end test engine that automates quality assurance testing in Chrome. | -| Typescript | https://www.typescriptlang.org/ | TypeScript is a superset of ECMAScript that provides a robust build-time type solution. | -| Formik | https://formik.org/ | Formik is a form solution to make forms easier in React. | -| Ethers | https://docs.ethers.io/v5/ | Ethers is an all-in-one library for interacting with the Ethereum blockchain. | +| TOOL | LEARN MORE | WHAT IT'S FOR | +| ---------------- | ------------------------------- | --------------------------------------------------------------------------------------- | +| Create-React-App | https://create-react-app.dev/ | React is a view library for creating components. | +| Redux | https://redux.js.org/ | Redux is a library for handling state managements. | +| React-Redux | https://react-redux.js.org/ | React-Redux connects a React app with a Redux data store. | +| Redux Toolkit | https://redux-toolkit.js.org/ | Redux Toolkit is an opinion toolset and pattern for Redux. | +| Ant Design | https://ant.design/ | Ant Design is a UI framework that contains React components. | +| Storybook | https://storybook.js.org/ | Storybook allows developers to view components in isolation. | +| Typescript | https://www.typescriptlang.org/ | TypeScript is a superset of ECMAScript that provides a robust build-time type solution. | +| Formik | https://formik.org/ | Formik is a form solution to make forms easier in React. | +| Ethers | https://docs.ethers.io/v5/ | Ethers is an all-in-one library for interacting with the Ethereum blockchain. | \ No newline at end of file diff --git a/cypress.json b/cypress.json deleted file mode 100644 index b471a6a5..00000000 --- a/cypress.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "baseUrl": "http://localhost:8000" -} diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json deleted file mode 100644 index da18d935..00000000 --- a/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} \ No newline at end of file diff --git a/cypress/integration/examples/actions.spec.js b/cypress/integration/examples/actions.spec.js deleted file mode 100644 index 09263799..00000000 --- a/cypress/integration/examples/actions.spec.js +++ /dev/null @@ -1,299 +0,0 @@ -/// - -context('Actions', () => { - beforeEach(() => { - cy.visit('https://example.cypress.io/commands/actions') - }) - - // https://on.cypress.io/interacting-with-elements - - it('.type() - type into a DOM element', () => { - // https://on.cypress.io/type - cy.get('.action-email') - .type('fake@email.com').should('have.value', 'fake@email.com') - - // .type() with special character sequences - .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') - .type('{del}{selectall}{backspace}') - - // .type() with key modifiers - .type('{alt}{option}') //these are equivalent - .type('{ctrl}{control}') //these are equivalent - .type('{meta}{command}{cmd}') //these are equivalent - .type('{shift}') - - // Delay each keypress by 0.1 sec - .type('slow.typing@email.com', { delay: 100 }) - .should('have.value', 'slow.typing@email.com') - - cy.get('.action-disabled') - // Ignore error checking prior to type - // like whether the input is visible or disabled - .type('disabled error checking', { force: true }) - .should('have.value', 'disabled error checking') - }) - - it('.focus() - focus on a DOM element', () => { - // https://on.cypress.io/focus - cy.get('.action-focus').focus() - .should('have.class', 'focus') - .prev().should('have.attr', 'style', 'color: orange;') - }) - - it('.blur() - blur off a DOM element', () => { - // https://on.cypress.io/blur - cy.get('.action-blur').type('About to blur').blur() - .should('have.class', 'error') - .prev().should('have.attr', 'style', 'color: red;') - }) - - it('.clear() - clears an input or textarea element', () => { - // https://on.cypress.io/clear - cy.get('.action-clear').type('Clear this text') - .should('have.value', 'Clear this text') - .clear() - .should('have.value', '') - }) - - it('.submit() - submit a form', () => { - // https://on.cypress.io/submit - cy.get('.action-form') - .find('[type="text"]').type('HALFOFF') - - cy.get('.action-form').submit() - .next().should('contain', 'Your form has been submitted!') - }) - - it('.click() - click on a DOM element', () => { - // https://on.cypress.io/click - cy.get('.action-btn').click() - - // You can click on 9 specific positions of an element: - // ----------------------------------- - // | topLeft top topRight | - // | | - // | | - // | | - // | left center right | - // | | - // | | - // | | - // | bottomLeft bottom bottomRight | - // ----------------------------------- - - // clicking in the center of the element is the default - cy.get('#action-canvas').click() - - cy.get('#action-canvas').click('topLeft') - cy.get('#action-canvas').click('top') - cy.get('#action-canvas').click('topRight') - cy.get('#action-canvas').click('left') - cy.get('#action-canvas').click('right') - cy.get('#action-canvas').click('bottomLeft') - cy.get('#action-canvas').click('bottom') - cy.get('#action-canvas').click('bottomRight') - - // .click() accepts an x and y coordinate - // that controls where the click occurs :) - - cy.get('#action-canvas') - .click(80, 75) // click 80px on x coord and 75px on y coord - .click(170, 75) - .click(80, 165) - .click(100, 185) - .click(125, 190) - .click(150, 185) - .click(170, 165) - - // click multiple elements by passing multiple: true - cy.get('.action-labels>.label').click({ multiple: true }) - - // Ignore error checking prior to clicking - cy.get('.action-opacity>.btn').click({ force: true }) - }) - - it('.dblclick() - double click on a DOM element', () => { - // https://on.cypress.io/dblclick - - // Our app has a listener on 'dblclick' event in our 'scripts.js' - // that hides the div and shows an input on double click - cy.get('.action-div').dblclick().should('not.be.visible') - cy.get('.action-input-hidden').should('be.visible') - }) - - it('.rightclick() - right click on a DOM element', () => { - // https://on.cypress.io/rightclick - - // Our app has a listener on 'contextmenu' event in our 'scripts.js' - // that hides the div and shows an input on right click - cy.get('.rightclick-action-div').rightclick().should('not.be.visible') - cy.get('.rightclick-action-input-hidden').should('be.visible') - }) - - it('.check() - check a checkbox or radio element', () => { - // https://on.cypress.io/check - - // By default, .check() will check all - // matching checkbox or radio elements in succession, one after another - cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]') - .check().should('be.checked') - - cy.get('.action-radios [type="radio"]').not('[disabled]') - .check().should('be.checked') - - // .check() accepts a value argument - cy.get('.action-radios [type="radio"]') - .check('radio1').should('be.checked') - - // .check() accepts an array of values - cy.get('.action-multiple-checkboxes [type="checkbox"]') - .check(['checkbox1', 'checkbox2']).should('be.checked') - - // Ignore error checking prior to checking - cy.get('.action-checkboxes [disabled]') - .check({ force: true }).should('be.checked') - - cy.get('.action-radios [type="radio"]') - .check('radio3', { force: true }).should('be.checked') - }) - - it('.uncheck() - uncheck a checkbox element', () => { - // https://on.cypress.io/uncheck - - // By default, .uncheck() will uncheck all matching - // checkbox elements in succession, one after another - cy.get('.action-check [type="checkbox"]') - .not('[disabled]') - .uncheck().should('not.be.checked') - - // .uncheck() accepts a value argument - cy.get('.action-check [type="checkbox"]') - .check('checkbox1') - .uncheck('checkbox1').should('not.be.checked') - - // .uncheck() accepts an array of values - cy.get('.action-check [type="checkbox"]') - .check(['checkbox1', 'checkbox3']) - .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') - - // Ignore error checking prior to unchecking - cy.get('.action-check [disabled]') - .uncheck({ force: true }).should('not.be.checked') - }) - - it('.select() - select an option in a