massive refactor toDrop cascadeStudio and add CadQuery + OpenSCAD

resolves #400

app/web/src/components/ProjectReactionsCell/ProjectReactionsCell.mock.ts

@@ -0,0 +1,6 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  projectReactions: {
+    id: 42,
+  },
+})

app/web/src/components/ProjectReactionsCell/ProjectReactionsCell.stories.tsx

@@ -0,0 +1,20 @@
+import { Loading, Empty, Failure, Success } from './ProjectReactionsCell'
+import { standard } from './ProjectReactionsCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : null
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : null
+}
+
+export const failure = () => {
+  return Failure ? <Failure error={new Error('Oh no')} /> : null
+}
+
+export const success = () => {
+  return Success ? <Success {...standard()} /> : null
+}
+
+export default { title: 'Cells/ProjectReactionsCell' }

app/web/src/components/ProjectReactionsCell/ProjectReactionsCell.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@redwoodjs/testing'
+import { Loading, Empty, Failure, Success } from './ProjectReactionsCell'
+import { standard } from './ProjectReactionsCell.mock'
+
+describe('ProjectReactionsCell', () => {
+  test('Loading renders successfully', () => {
+    render(<Loading />)
+    // Use screen.debug() to see output
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+
+  test('Empty renders successfully', async () => {
+    render(<Empty />)
+    expect(screen.getByText('Empty')).toBeInTheDocument()
+  })
+
+  test('Failure renders successfully', async () => {
+    render(<Failure error={new Error('Oh no')} />)
+    expect(screen.getByText(/Oh no/i)).toBeInTheDocument()
+  })
+
+  test('Success renders successfully', async () => {
+    render(<Success projectReactions={standard().projectReactions} />)
+    expect(screen.getByText(/42/i)).toBeInTheDocument()
+  })
+})

app/web/src/components/ProjectReactionsCell/ProjectReactionsCell.tsx

@@ -0,0 +1,30 @@
+import ProjectReactions from 'src/components/ProjectReactions/ProjectReactions'
+
+export const QUERY = gql`
+  query ProjectReactionsQuery($projectId: String!) {
+    projectReactionsByProjectId(projectId: $projectId) {
+      id
+      emote
+      user {
+        id
+        userName
+        image
+      }
+      updatedAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => (
+  <div className="text-center py-8 font-roboto text-gray-700">
+    No reactions to this project yet 😕
+  </div>
+)
+
+export const Failure = ({ error }) => <div>Error: {error.message}</div>
+
+export const Success = ({ projectReactionsByProjectId }) => {
+  return <ProjectReactions reactions={projectReactionsByProjectId} />
+}