Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-org repo to prepare as a package #7

Merged
merged 10 commits into from
Nov 22, 2023
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

[*]

indent_style = space
indent_size = 2

end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should hopefully help with our swiftlint woes

8 changes: 0 additions & 8 deletions .eslintrc.js

This file was deleted.

27 changes: 27 additions & 0 deletions .github/actions/setup/action.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: Setup
description: Setup Node.js and install dependencies

runs:
using: composite
steps:
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18

- name: Cache dependencies
id: yarn-cache
uses: actions/cache@v3
with:
path: |
**/node_modules
.yarn/install-state.gz
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/package.json') }}
restore-keys: |
${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
${{ runner.os }}-yarn-

- name: Install dependencies
if: steps.yarn-cache.outputs.cache-hit != 'true'
run: yarn install --immutable
shell: bash
53 changes: 53 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
name: CI Pipeline

on:
pull_request:
workflow_dispatch:

jobs:
lint-sample:
name: Lint Sample App
runs-on: shopify-ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Setup
uses: ./.github/actions/setup

- run: yarn sample lint

lint-native-module:
name: Lint Native Module
runs-on: shopify-ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Setup
uses: ./.github/actions/setup

- run: yarn module lint

lint-swift:
name: Lint Swift code for Native Module
runs-on: shopify-ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Run SwiftLint
uses: norio-nomura/action-swiftlint@3.2.1
with:
args: --strict

- name: Check License Headers
run: ./scripts/copy_license && git diff --name-only --exit-code

build-native-module:
name: Build `react-native-shopify-checkout-kit`
runs-on: shopify-ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Setup
uses: ./.github/actions/setup

- run: yarn module build
31 changes: 0 additions & 31 deletions .github/workflows/lint.yml

This file was deleted.

4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ yarn-error.log

# Ruby / CocoaPods
/ios/Pods/
sample/ios/Pods/
/vendor/bundle/

# Temporary files created by Metro to check the health of the file watcher
Expand All @@ -77,3 +78,6 @@ yarn-error.log

# Build
.build
lib
dist
.turbo
8 changes: 0 additions & 8 deletions .prettierrc.js

This file was deleted.

Binary file added .yarn/install-state.gz
markmur marked this conversation as resolved.
Show resolved Hide resolved
Binary file not shown.
893 changes: 893 additions & 0 deletions .yarn/releases/yarn-4.0.2.cjs

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
nmHoistingLimits: workspaces

nodeLinker: node-modules

plugins:
- path: scripts/pod-install.cjs

yarnPath: .yarn/releases/yarn-4.0.2.cjs
66 changes: 66 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
# Contributing

This repo is subdivided into 3 parts using yarn workspaces:

- The base repo (workspace name = `checkout-kit-react-native`)
- The `react-native-shopify-checkout-kit` Native Module (workspace name = `module`)
- The sample application (workspace name = `sample`)

Each of the worksapces contains a separate `package.json` to manage tasks specific to each workspace.

## Base repo

## Install dependencies

Run `yarn` to install the dependencies for all workspaces in the repo.

---

## `react-native-shopify-checkout-kit` Module

### Clean the modules folder

```bash
yarn module clean
```

### Build the `react-native-shopify-checkout-kit` module

```sh
yarn module build
```

### Lint the module

```sh
yarn module lint
```

---

## Sample application

## Start the sample application

### For Android

```bash
# Start the Metro server
yarn sample start

# Start the Metro server and run the Android sample application
yarn sample android

# Start the Metro server and run the iOS sample application
yarn sample android
```

If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

## Lint the sample application

```sh
yarn sample lint
```
104 changes: 36 additions & 68 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,79 +1,47 @@
# Checkout Kit - React Native

![image](https://github.com/Shopify/checkout-kit-react-native/assets/318265/1f7b1b5b-0212-4ba9-93fa-14b76ae5d239)
TODO

>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.

## Step 1: Start the Metro Server
## Install

First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
```sh
yarn add react-native-shopify-checkout-kit

To start Metro, run the following command from the _root_ of your React Native project:

```bash
# using npm
npm start

# OR using Yarn
yarn start
```

## Step 2: Start your Application

Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:

### For Android

```bash
# using npm
npm run android

# OR using Yarn
yarn android
# or using npm
npm install react-native-shopify-checkout-kit
```

### For iOS

```bash
# using npm
npm run ios

# OR using Yarn
yarn ios
## Usage

```tsx
import {ShopifyCheckout} from "react-native-shopify-checkout-kit"

function App() {
const checkoutURL = useRef<string>(null)

const handleAddToCart = useCallback((variantId) => {
// Add item to cart using the Storefront API
// Retrieve checkoutUrl from the Storefront response
checkoutURL.current = response.data.cartLinesAdd.cart.checkoutUrl
}, []);

const handleCheckout = useCallback(() => {
if (checkoutURL.current) {
ShopifyCheckout.present(checkoutURL.current)
}
}, [])

return (
<Catalog>
<Product onAddToCart={handleAddToCart} />
<Button onPress={handleCheckout}>
<Text>Checkout</Text>
</Button>
<Catalog>
)
}
```

If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

## Step 3: Modifying your App

Now that you have successfully run the app, let's modify it.

1. Open `App.tsx` in your text editor of choice and edit some lines.
2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!

For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).

# Troubleshooting

If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- [React Native Website](https://reactnative.dev) - learn more about React Native.
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
See [Contributing](./CONTRIBUTING.md) for contribution guidance.
Loading