{"_id":"@dennisbruijnpropertypass/property-pass-ui","_rev":"1-43b8987d4c3ae6c341682c5de14ae084","name":"@dennisbruijnpropertypass/property-pass-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@dennisbruijnpropertypass/property-pass-ui","version":"1.0.0","description":"Property Pass UI components","license":"MIT","dependencies":{"@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.1.0","@testing-library/user-event":"^12.1.10","@types/color":"^3.0.1","@types/jest":"^26.0.15","@types/node":"^12.0.0","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@types/styletron-engine-atomic":"^1.1.0","@types/styletron-react":"^5.0.2","@types/styletron-standard":"^2.0.1","baseui":"^9.110.0","color":"^3.1.3","react":"^17.0.1","react-dom":"^17.0.1","react-scripts":"4.0.3","react-virtuoso":"^1.5.9","styletron-engine-atomic":"^1.4.7","styletron-react":"^6.0.0","typescript":"^4.1.2","web-vitals":"^1.0.1"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","publish":"npm publish --access public","storybook":"start-storybook -p 6006 -s public","storybook:build":"build-storybook -s public","storybook:publish":"npx chromatic --project-token=d885daf33d83","lint":"eslint src --ext .ts,.tsx","pretty":"prettier --ignore-path .gitignore  --write \"./**/*.{ts,tsx}\""},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@storybook/addon-actions":"^6.1.20","@storybook/addon-essentials":"^6.1.20","@storybook/addon-links":"^6.1.20","@storybook/node-logger":"^6.1.20","@storybook/preset-create-react-app":"^3.1.6","@storybook/react":"^6.1.20","chromatic":"^5.6.3"},"gitHead":"7f3e8ddd508bff624851527ba4a9cec51a2f2456","_id":"@dennisbruijnpropertypass/property-pass-ui@1.0.0","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CD8/k3rSqyzUx+/iYuHZkbULdffdxfwUUobFXTS1yxVUN0tOKVS9XS4zZAQkyMTjUO7zoXXBqVHK2fLtqnFphQ==","shasum":"635caaa49483f00a4c33695cf75e418bda4dd6bb","tarball":"https://registry.npmjs.org/@dennisbruijnpropertypass/property-pass-ui/-/property-pass-ui-1.0.0.tgz","fileCount":120,"unpackedSize":6831833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPPXFCRA9TVsSAnZWagAAbwgP/infY09HZ20cYRAA8Wue\nolGgscC+dwrnO5xYw6byrEW3x8bQcNRALAZ7Fr89kQWufZrizNwshWxboD9o\nI6ULKyPgL9knvFE2XpJVgNi7FgV6BPWJhPT29YSPhArHlM05jwj0faxYbn8A\n641HFMJohdtvbBXtxURx/caT5uqFGJkrz064O2I6JvhnQzncMdgImbOPKZM4\njZ/h+XQU6MEtLeo39pxFvTCL0xnAYQ3ZIUCJPaYLAah4UPBDh5ql5F8OhkWd\nDPVtBEQhBtqf08epk5UioCTwTZ4oDswx2QfG0tk6Nw+5Bhpu8I4nphne7bVg\nwjKx2nEp4lbd5zL0y9EI1uWdL0rjG0q0QOSFUOl7Xq3GGkUzm0NNDpWJscog\nobIDP3z3X3i0k61G7wE+t3Jhjg2plZSGO+tSy/4dbRoLa5snHDVLmYsAQEi2\ntR6BKfqN/Ey70ubvCtwLwr4khEGXUl4zz7yJZu7C5jOxf/0CeA52OMw06Hqd\nEszGgp8ThSoh0xja4uHrud8veC0uOC2Bb4buvkmDgo7+x+J6tXj9L9YGdfzQ\nXMqbZ28dWg8ijsTp6U7q/8K9Pj9cWUc/KuYJ3q4kX3kRl4EqzM2ZYG3vMr2F\nNPCU8IE4PAPubwiyZJxtSHFk40dtel/hhsLoDrK1K8qMvACUTEZBUfBicWZg\n5HhN\r\n=VHgY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBgTzgN1dHCNizE9o64HRT+G6Z9nzPj16P9y8HjAvugyAiBayQBd0auHA1NoRt4EAodt9Vlld99DSLOoWuJXEnLVtA=="}]},"_npmUser":{"name":"dennisbruijnpropertypass","email":"dennisbruijn@propertypass.com"},"directories":{},"maintainers":[{"name":"dennisbruijnpropertypass","email":"dennisbruijn@propertypass.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/property-pass-ui_1.0.0_1614607813245_0.13558480992456157"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-01T14:10:13.191Z","1.0.0":"2021-03-01T14:10:13.434Z","modified":"2022-04-05T03:45:18.754Z"},"maintainers":[{"name":"dennisbruijnpropertypass","email":"dennisbruijn@propertypass.com"}],"description":"Property Pass UI components","license":"MIT","readme":"# Component development for Property Pass 🔑\n\nBasically we design our components in Sketch, build them in Storybook and consume them in React, that’s short-and-simple, here’s an in depth guide.\n\n## 01. Design stage\n\nThe UI/UX designers of Property Pass will create new components; Always check with them. They also set the guidelines, spacing, fonts and other tokens.\n\n### Align often\n\nIt's good to have meetings often to counter and challenge each-other, not everything what can be designed is easy to build.\n\n### Where's my design?\n\nIn the JIRA tickets there would be either a screenshot attached or a URL to Zeplin, our design system exploring tool.\n\n## 02. Build stage\n\nAs stated before we build our components within the Storybook framework so it's mostly framework agnostic and everything can be build in isolation.\n\n![enter image description here](https://www.learnstorybook.com/design-systems-for-developers/design-system-context.jpg)\n\n> Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.\n\n### A. Extract the necessary data\n\nBefore you begin writing your component head off to Zeplin to check if the UI/UX design is finalised, and, if there are new tokens that should be taken into account.\n\n### B. Let's build a `<ListItem>` component\n\n1.) Pull the latest version of `develop`\n\n2.) Create branch for component\n`$ git checkout -b feature/add-list-item-component`\n\n3.) Open your editor and create a new folder in `src/stories` give this folder the name of your component e.g, `list-item`\n\n4.) Add two files `ListItem.tsx` and `ListItem.stories.tsx`\n\n5.) `ListItem.tsx` contains our component code; A Property Pass UI component always needs to have the following structure:\n\n**Every component should be typed**\nWe use TypeScript so whenever you make a new component use the `.tsx` extension.\n\n**You need to import all the resources you need (modules, assets, helpers, etc.)**\n\nIn our case we want to import `react` and leverage `baseui/list`\n\n```\nimport  React  from  'react';\nimport {\nListItem  as  BaseListItem,\nListItemLabel,\nARTWORK_SIZES,\n} from  'baseui/list';\n```\n\nAs you've might noticed we rename the current ListItem to BaseListItem because we want to use that name in our component.\n\n**Each component that recieves props needs to be typed**\n\nWe also need to add an interface to our component so that TypeScript knows what to expect and show the develop who's implementing the component you've build.\n\n```\nexport interface ListItemProps {\n\tchildren: React.ReactNode;\n\tartwork?: React.ReactNode;\n\tendEnhancer?: React.ReactNode;\n\tonClick?: () => void;\n}\n```\n\nNotice that the interface name reflects the components name, in this case we can easily clone and identify. If you have problems figuring out your interface take a look at https://github.com/typescript-cheatsheets/react\n\n**Each component should be small whenever it's controlled or uncontrolled, it should a have a single responsibility (in general)**\n\n```\n/**\n* This is a title that automatically will be reflected in your storybook story\n*/\n\nconst ListItem: React.FC<ListItemProps> = (props) => {\n\tconst { children, artwork, endEnhancer } = props;\n\n\treturn (\n\t\t<BaseListItem\n\t\tartwork={artwork}\n\t\tartworkSize={ARTWORK_SIZES.MEDIUM}\n\t\tendEnhancer={() => endEnhancer}\n\t\t{...props}\n\t\t>\n\t\t\t<ListItemLabel>{children}</ListItemLabel>\n\t\t</BaseListItem>\n\t);\n};\nexport default ListItem;\n```\n\nNow that we've defined our component it's time to write the story.\n\n6.) `ListItem.stories.tsx` contains our storybook story code; A Property Pass UI component story always needs to have the following structure:\n\n**Every story should be typed**\nWe use TypeScript so whenever you make a new component use the `.tsx` extension.\n\n**You need to import all the resources you need (modules, assets, helpers, etc.)**\n\nIn our case we want to import `react`, the `Story` and `Meta` module from storybook react/types, the `ThemeProvider` and the component itself.\n\n```\nimport  React  from  'react';\nimport { Story, Meta } from  '@storybook/react/types-6-0';\nimport { ThemeProvider } from  '../ThemeProvider';\nimport  ListItem, { ListItemProps } from  './ListItem';\n```\n\nFirst we we'll define our default `Meta` export, this META data allows storybook to know a couple of things beforehand. In our case it yields the path within the tree-view (the sidebar in Storybook) and the component itself.\n\n```\nexport  default {\n\ttitle:  'Components/Content/ListItem',\n\tcomponent:  ListItem,\n} as  Meta;\n```\n\nAfter that we want to setup the `Template` of our story. This always includes the `<ThemeProvider>` since we need to provide the theme to the story.\n\n```\nconst  Template:  Story<ListItemProps> = (args) => {\n\treturn (\n\t\t<ThemeProvider>\n\t\t<ListItem  {...args}  />\n\t\t</ThemeProvider>\n\t);\n};\n```\n\nLastly we should define our arguments, in react words, the props of the component. Although our component can receive many props we only need/want to pass the children.\n\n```\nexport  const  Default  =  Template.bind({});\nDefault.args  = {\n\tchildren:  'Add a new building',\n};\n```\n\nThat should be it 🎉\n\n**Build your storybook instance**\n\nBuild your instance by running `$ yarn storybook`\n\n**Navigate to your component in the tree-view**\nOnce you've found it, go play around, see if everything works as expected and if it does move on to the next stage.\n\n### C. Consume the `<ListItem>` component\n\n// This section is reserved for the implmentation part of the components\n\n## 03. Review/deploy stage\n\n// This section is reserved for PR, CI/CD and publishing steps, in the end we want to components to live in isolation and be published on NPM so that all projects can use them\n","readmeFilename":"README.md"}