@placeinc/react-web-components NPM

mobile-component-library

Installation

cd web-components run yarn
cd ../
yarn

Local Development

To run the project locally you need to run two scripts:

yarn start
yarn storybook

To build web components

yarn build-web-components The output will be placed in ./lib/web-components.js The components now can be used in an html file as <place-[componentname]> ex. <place-agentbio>

Test web components

Add an index.html file to root
Add <script src="lib/web-components.js"></script> to the head
Add <place-[componentname]> to the body tag
Open the index.html in the web browser

Notes on building components

Props has to be lower case ex.

 image_url: string;
 name: string;
 company: string;
 bio: string;
 on_phone_pressed: () => {};
 on_chat_pressed: () => {};
 on_email_pressed: () => {};
 on_myagent_pressed: () => {};

Props has to be defined as a type ex.

  type AgentBioProps = {
      image_url: string;
      name: string;
      company: string;
      bio: string;
      on_phone_pressed: () => {};
      on_chat_pressed: () => {};
      on_email_pressed: () => {};
      on_myagent_pressed: () => {};
  };

Events has to be declared like:

  type AgentBioProps = {
      on_phone_pressed: () => {};
      on_chat_pressed: () => {};
      ...
  };

  const AgentBio: React.FC<AgentBioProps> = ({
      on_phone_pressed,
      on_chat_pressed,
  }) => {
  ...

Name the props after the component name so the documentation can pick it up:

type AgentBioProps = {
    ...
};

const AgentBio: React.FC<AgentBioProps> = ({
   ...
}) => {
...

Commiting code

All dev work is done on the dev branch
pull dev branch and create a branch name after ticket number
once work is done create a pr to the dev branch
when the pr is merged to the dev branch the build pipline will run

Build Pipeline

The build pipline code can be found in .gitlab-ci.yml It can also be found in https://gitlab.brivity.com/mobile/mobile-component-library/-/ci/editor?branch_name=dev

The build pipline has multiple steps
1. Pushing code to npm
2. Pushing code to cdn
3. Building storybook
4. Building documentation
The build pipline will also run based on what branch was merged
- Dev
- Staging
- Master
NPM:
1. the location of the npm package is here: https://www.npmjs.com/package/@placeinc/react-web-components
2. it can be installed with yard add @placeinc/react-web-components --dev
CDN:
1. Currently there is 3 locations where the code gets put on a cdn: dev, staging, prod
  - dev: https://mobile-component-services-library-dev.s3.amazonaws.com/web-components.min.js?ck=1
  - staging: https://mobile-component-services-library-staging.s3.amazonaws.com/web-components.min.js?ck=1
  - prod: https://mobile-component-services-library.s3.amazonaws.com/web-components.min.js?ck=1
Storybook:
- currently storybook isn't automated to get pushed any where but the output is located in the artifact of the build pipline
Documentation
- currently the documentation isn't automated to get pushed any where but the output is located in the artifact of the build pipline

@expo/webpack-config @hookform/resolvers @miblanchard/react-native-slider @react-google-maps/api @react-native-picker/picker framer-motion luxon moment react-native-a11y-slider react-native-gesture-handler react-native-google-places-autocomplete react-native-reanimated react-native-redash react-native-web-hooks react-numeral recharts twrnc use-debounce yup

@infinitebrahmanuniverse/nolb-_plac @everything-registry/sub-chunk-724 @zalastax/nolb-_plac

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

6 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago