Merge pull request #136 from shipt/development

Release 2.1.2

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 defaults: &defaults
   working_directory: ~/osmosis
   docker:
-    - image: circleci/node:14.17.0
+    - image: cimg/node:18.15.0
 
 install_dependencies: &install_dependencies
   run:
@@ -30,7 +30,7 @@ jobs:
       - <<: *generate_types
       - run:
           name: Install React Example Dependencies
-          command: cd examples/counter-react; yarn
+          command: cd examples/counter-nextjs; yarn
       - run:
           name: Run React Example Test
           command: yarn test

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## v2.1.2
+* Updated several dependencies
+* Upgrade babel
+* Add sample NextJS project to repo
+
 ## v2.1.1
 * Updated several dependencies
 * Added custom transformer option for state persistence with the usePersistedState hook

examples/counter-nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/counter-nextjs/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/counter-nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/counter-nextjs/jest.config.mjs

@@ -0,0 +1,18 @@
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './src',
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

examples/counter-nextjs/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/counter-nextjs/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

examples/counter-nextjs/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "counter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@shipt/osmosis": "../../osmosis",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "next": "13.5.6",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "eslint": "^8",
+    "eslint-config-next": "13.5.6"
+  }
+}

examples/counter-nextjs/src/app/counters/counter-by-name/counter-by-name.js

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { DynamicCounterStore } from '../../stores';
+
+const Counter = ({ name }) => {
+  const {
+    state: { count },
+    decrementCount
+  } = DynamicCounterStore.useStore();
+
+  // this isn't necessary, but this demonstrates how a store ref would be used if a storeKey is provided
+  const incrementCount = () => DynamicCounterStore[name].incrementCount();
+
+  return (
+    <div data-testid="counter-wrap">
+      <p>
+        Counter with key {name}: {count}
+      </p>
+      <button data-testid="decrement" onClick={decrementCount}>
+        -
+      </button>
+      <button data-testid="increment" onClick={incrementCount}>
+        +
+      </button>
+    </div>
+  );
+};
+
+export default DynamicCounterStore.Provider(Counter);
+

examples/counter-nextjs/src/app/counters/counter-by-name/page.js

@@ -0,0 +1,16 @@
+import DynamicCounter from './counter-by-name.js';
+
+const counters = ['A', 'B', 'C'];
+
+export default function CounterByName() {
+  return (
+    <main>
+      <h3>Counter By Name</h3>
+      {counters.map(name => (
+        <DynamicCounter key={name} storeKey={name} name={name} />
+      ))}
+    </main>
+  )
+}
+
+

examples/counter-nextjs/src/app/counters/persisted-counter/page.js

@@ -0,0 +1,11 @@
+import PersistedCounter from './persisted-counter.js';
+
+export default function SimpleCounter() {
+  return (
+    <main>
+      <h3>Persisted Counter</h3>
+      <PersistedCounter />
+    </main>
+  )
+}
+

examples/counter-nextjs/src/app/counters/persisted-counter/persisted-counter.js

@@ -0,0 +1,27 @@
+'use client';
+
+import React from 'react';
+import { CounterStore } from '../../stores/counter.store.js';
+
+const PersistedCounter = () => {
+  const {
+    state: { persistedCount },
+    decrementPersistedCount,
+    incrementPersistedCount
+  } = CounterStore.useStore();
+
+  return (
+    <div data-testid="counter-wrap">
+      <p>Persisted Count: {persistedCount}</p>
+      <button data-testid="decrement" onClick={decrementPersistedCount}>
+        -
+      </button>
+      <button data-testid="increment" onClick={incrementPersistedCount}>
+        +
+      </button>
+    </div>
+  );
+};
+
+export default PersistedCounter;
+

examples/counter-nextjs/src/app/counters/reducer-counter/page.js

@@ -0,0 +1,11 @@
+import CounterWithReducer from './reducer-counter.js';
+
+export default function ReducerCounter() {
+  return (
+    <main>
+      <h3>Simple Counter</h3>
+      <CounterWithReducer />
+    </main>
+  )
+}
+

examples/counter-nextjs/src/app/counters/reducer-counter/reducer-counter.js

@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+import { CounterWithReducerStore } from '../../stores';
+
+const CounterWithReducer = () => {
+  const {
+    dispatch,
+    counterState: { count }
+  } = CounterWithReducerStore.useStore();
+
+  return (
+    <div data-testid="counter-wrap">
+      <p>Dispatch Count: {count}</p>
+      <button data-testid="decrement" onClick={() => dispatch({ type: 'decrement' })}>
+        -
+      </button>
+      <button data-testid="increment" onClick={() => dispatch({ type: 'increment' })}>
+        +
+      </button>
+    </div>
+  );
+};
+
+export default CounterWithReducer;

examples/counter-nextjs/src/app/counters/simple-counter/__tests__/__snapshots__/counter.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Counter renders default 1`] = `
+<div
+  data-testid="counter-wrap"
+>
+  <p>
+    Count: 
+    0
+  </p>
+  <button
+    data-testid="decrement"
+  >
+    -
+  </button>
+  <button
+    data-testid="increment"
+  >
+    +
+  </button>
+</div>
+`;

examples/counter-nextjs/src/app/counters/simple-counter/__tests__/counter.spec.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Counter from '../counter';
+import { CounterStore } from '../../../stores';
+import { render, fireEvent } from '@testing-library/react';
+
+describe('Counter', () => {
+  const counterStore = {
+    state: {
+      count: 0
+    },
+    incrementCount: jest.fn(),
+    decrementCount: jest.fn()
+  };
+  let ContextComponent = () => (
+    <CounterStore.Context.Provider value={counterStore}>
+      <Counter />
+    </CounterStore.Context.Provider>
+  );
+  it('renders default', async () => {
+    let wrapper = await render(<ContextComponent />);
+    expect(wrapper.getByTestId('counter-wrap')).toMatchSnapshot();
+  });
+  it('tests increment button', async () => {
+    let wrapper = await render(<ContextComponent />);
+    fireEvent.click(wrapper.getByTestId('increment'));
+    expect(counterStore.incrementCount).toHaveBeenCalled();
+  });
+  it('tests decrement button', async () => {
+    let wrapper = await render(<ContextComponent />);
+    fireEvent.click(wrapper.getByTestId('decrement'));
+    expect(counterStore.decrementCount).toHaveBeenCalled();
+  });
+});
+

examples/counter-nextjs/src/app/counters/simple-counter/counter.js

@@ -0,0 +1,26 @@
+'use client'
+import React from 'react';
+import { CounterStore } from '../../stores';
+
+const Counter = () => {
+  const {
+    state: { count },
+    decrementCount,
+    incrementCount
+  } = CounterStore.useStore();
+
+  return (
+    <div data-testid="counter-wrap">
+      <p>Count: {count}</p>
+      <button data-testid="decrement" onClick={decrementCount}>
+        -
+      </button>
+      <button data-testid="increment" onClick={incrementCount}>
+        +
+      </button>
+    </div>
+  );
+};
+
+export default Counter;
+

examples/counter-nextjs/src/app/counters/simple-counter/page.js

@@ -0,0 +1,10 @@
+import Counter from './counter.js';
+
+export default function SimpleCounter() {
+  return (
+    <main>
+      <h3>Simple Counter</h3>
+      <Counter />
+    </main>
+  )
+}