diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 300b558ce..bb7f1bd79 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,72 +2,6 @@ We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. -## Development workflow - -To get started with the project, run `yarn bootstrap` in the root directory to install the required dependencies for each package: - -```sh -yarn bootstrap -``` - -While developing, you can run the [example app](/example/) to test your changes. - -To start the packager: - -```sh -yarn example start -``` - -To run the example app on Android: - -```sh -yarn example android -``` - -To run the example app on iOS: - -```sh -yarn example ios -``` - -To run the example app on Web: - -```sh -yarn example web -``` - -Make sure your code passes TypeScript and ESLint. Run the following to verify: - -```sh -yarn typescript -yarn lint -``` - -To fix formatting errors, run the following: - -```sh -yarn lint --fix -``` - -Remember to add tests for your change if possible. Run the unit tests by: - -```sh -yarn test -``` - -### Commit message convention - -We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: - -- `fix`: bug fixes, e.g. fix crash due to deprecated method. -- `feat`: new features, e.g. add new method to the module. -- `refactor`: code refactor, e.g. migrate from class components to hooks. -- `docs`: changes into documentation, e.g. add usage example for the module.. -- `test`: adding or updating tests, eg add integration tests using detox. -- `chore`: tooling changes, e.g. change CI config. - -Our pre-commit hooks verify that your commit message matches this format when committing. - ### Linting and tests [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) @@ -76,18 +10,6 @@ We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint] Our pre-commit hooks verify that the linter and tests pass when committing. -### Scripts - -The `package.json` file contains various scripts for common tasks: - -- `yarn bootstrap`: setup project by installing all dependencies and pods. -- `yarn typescript`: type-check files with TypeScript. -- `yarn lint`: lint files with ESLint. -- `yarn test`: run unit tests with Jest. -- `yarn example start`: start the Metro server for the example app. -- `yarn example android`: run the example app on Android. -- `yarn example ios`: run the example app on iOS. - ### Sending a pull request > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). diff --git a/README.md b/README.md index af78026f2..3dbfee0c6 100644 --- a/README.md +++ b/README.md @@ -5,101 +5,42 @@ Draftbit's specialized component library. Loosely based on React Native Paper, t This is a monorepo containing the packages comprising `@draftbit/ui`, [Draftbit's](https://draftbit.com) component library used inside our Builder. -See [the `ui` package readme](./packages/ui#readme) for details. - ## Quickstart: ```sh git clone https://github.com/draftbit/react-native-jigsaw && cd react-native-jigsaw -yarn && yarn bootstrap && yarn build -yarn example start -c --web +yarn && yarn build +yarn example start ``` Any changes in the `packages/` typescript files should be automatically picked -up by the Metro bundler and reflected in the example application. +up by the Metro bundler and reflected in the example application. In some cases, +you may need to stop the example app, rebuild, and restart it. Please read the [contributing guide](CONTRIBUTING.md) before making a pull-request and to understand the full development flow -## Uploading Example to Snack: - -``` -yarn example:snack -``` - ## Overview -This is a lerna/monorepo setup that is split up into types, native, core and ui packages. +This is a lerna/monorepo setup that is split up into several packages. -- packages/ui: pulls in everything from core and native and re-exports it. This is what any user will install to use this Library -- packages/core: Non-native, javascript components go here. These are components that work perfectly across web, ios and android without any adjustments -- packages/native: Native components that rely on expo/react-native modules likes `expo-av` and `@expo/vector-icons`. This houses our AudioPlayer and Icon components because the current version requires modifications to work well on Web -- packages/theme: Draftbit's theming system +- packages/ui: pulls in everything from core, native, and theme and re-exports it. This is what any user will install to use this Library +- packages/core: This is where all components go, components should work across web, ios, and android. Additionally, all utils and shared files go here. +- packages/theme: This houses our theming system and all it's related files. +- packages/native: This was intended to house native components that rely on expo/react-native modules likes `expo-av` and `@expo/vector-icons`. However, currently all our components work with on all platforms (even the ones here) and there is no need to have a separate native package. However, this this is kept for now to avoid breaking changes. +- packages/maps: This is where the map components go. This package utlizes a native package and a web package to provide a cross platform map component. +- packages/types: This was intended to expose some additional types to the components. However, we've moved away from this in favor of writing all components in typescript. ** Chances are, you'll spend most of your time in `packages/core` ** -### SEED_DATA - -Most components will have a `SEED_DATA` object. This is how we incorporate components and props into Draftbit's property panel. - -This object maps one to one to what the UI will look like in the panel. Here's an example of the "View" component: - -![Draftbit Properties Panel](./images/view-properties-panel.png) - -Here's an example of what the SEED_DATA prop would look like: - -```js - source: createImageProp(), - pointerEvents: { - group: GROUPS.advanced, - name: "pointerEvents", - label: "pointerEvents", - description: "Pointer events" - options: ["auto", "none", "box-none", "box-only"], - editable: true, - required: false, - formType: FORM_TYPES.flatArray, - propType: PROP_TYPES.STRING, - defaultValue: "auto", - }, -``` - -#### Objects vs. Functions for SEED_DATA - -Our legacy implementation included an object, like you see `pointerEvents` above. Moving forward, everything should be a function, like `createImageProp()`. The reason is that its easier to maintain and update across the board when features change inside the builder. - -If you're having doubts, use a function. If that function doesn't exist, create it! +## Running Example App -All the functions and SEED_DATA live inside the [draftbit repo](https://github.com/draftbit/draftbit/blob/master/component-mappings). The jigsaw repo currently only holds the components, the mapping logic is maintained within the draftbit repo. - -## Linking - -If you want to dynamically link these packages into a project using `yarn link`, -make sure to run `yarn watch ` from the root folder so that lerna -can properly cross link everything, then `yarn link` from the particular package -directory (not the root!) you are interested in. - -So if using `@draftbit/core` in a create-react-app, this would look like: - -```console -# In react-native-jigsaw/ -$ yarn install -$ yarn watch core - -# In ./packages/core/ -$ yarn link - -# In create-react-app project root -$ -$ yarn add @draftbit/core # only if this is the first time using it -$ yarn install -$ yarn link @draftbit/core -$ yarn start +```sh +yarn +yarn build +yarn example start ``` -You should be able to make changes inside `core/`, have nodemon pick them up and -rebuild, then have create-react-app pick that up and rebuild. - ## Publishing Pre-Release: @@ -133,7 +74,10 @@ Release Process: ## Upgrade Expo SDK Modules -Run `node scripts/upgrade-expo-sdk-packages.js expo-sdk-version`. Where expo-sdk-version comes from Expo. Expo hosts a file called `bundledNativeModules.json`. You must use the correct version via the url: `https://github.com/expo/expo/blob/sdk-46/packages/expo/bundledNativeModules.json` +- Go through each of the packages and temporarily install the intended version of `expo` +- Run `npx expo install --fix` to update the packages to the correct version +- Remove the temporarily installed `expo` +- Check if there any packages or resolutions that need to be updated in root `package.json` ## Plug @@ -142,13 +86,3 @@ Sound cool? [We're hiring!](https://draftbit.com/jobs). ## License MIT - -## Contributing - -- Any color should be passed down via theme prop: - -``` -// NOT dotColor="#5a45ff" b/c that isn't theme powered -// Learn more here https://callstack.github.io/react-native-paper/theming.html - -``` diff --git a/package.json b/package.json index 798b98b32..e6b3c5601 100644 --- a/package.json +++ b/package.json @@ -15,14 +15,11 @@ "example:web": "yarn example start -c --web", "example:ios": "yarn example start -c --ios", "example:android": "yarn example start -c --android", - "bootstrap": "lerna bootstrap", - "crosslink": "lerna link", "format": "prettier --write .", "lint": "eslint \"**/*.{ts,tsx}\"", "build": "lerna run build", "test": "lerna run test --stream -- --passWithNoTests", "release": "lerna publish", - "example:snack": "ts-node --transpile-only scripts/upload-to-snack.ts", "clean": "lerna run clean", "clean:modules": "lerna run clean:modules && rm -rf node_modules", "typescript": "tsc --composite false", diff --git a/packages/ui/README.md b/packages/ui/README.md deleted file mode 100644 index 85a9873d4..000000000 --- a/packages/ui/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# @draftbit/ui - -The user interface library that powers [Draftbit](https://draftbit.com) Apps. - -`@draftbit/ui` is based on [React Native Paper](https://github.com/callstack/react-native-paper) but allows us to extend -components to empower our users with more features ⚡️ - -## Differences between React Native Paper and Jigsaw - -- Embedded themes. Jigsaw has a very robust theming system that is directly - integrated into our builder. React Native Paper is based on Material Design - where ours is more generalized for both iOS and Android. That doesn't make it - any better or worse, it just means ours is directly integrated into our - product and by controlling the library we can make changes as often as we need - -- Different components & use cases. React Native Paper is really great for - building Material-style apps where we use Jigsaw to build any type of app. - You'll find a different series of components for different use cases. - -We love React Native Paper and even plan on supporting it one day as a different -component library, Jigsaw just allows us to deeply embed components, props, -themes directly into the Draftbit platform - -## Installation - -```console -npm install @draftbit/ui -``` - -## Contributing - -This package is developed in a monorepository. See the -[root readme](https://github.com/draftbit/react-native-jigsaw) for details on -contributing. - -## License - -MIT