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

New component library #1

Merged
merged 80 commits into from
Jul 25, 2023
Merged
Show file tree
Hide file tree
Changes from 75 commits
Commits
Show all changes
80 commits
Select commit Hold shift + click to select a range
40481ed
First component
jonathan-waarneming-nl Jun 27, 2023
ff2db9f
Add Accordion
jonathan-waarneming-nl Jun 28, 2023
f5883f3
Move unit tests
jonathan-waarneming-nl Jun 28, 2023
30d5218
Add Icons
jonathan-waarneming-nl Jun 28, 2023
dc9a1c1
v0.0.17
jonathan-waarneming-nl Jun 29, 2023
040338d
Add IconButton
jonathan-waarneming-nl Jun 29, 2023
8ed952e
Add BackButton
jonathan-waarneming-nl Jun 29, 2023
f122010
Add BackgroundImage
jonathan-waarneming-nl Jun 29, 2023
757da64
Add LargeButton
jonathan-waarneming-nl Jun 29, 2023
fc2cb9d
v0.0.18
jonathan-waarneming-nl Jun 29, 2023
24b488b
Add linting
jonathan-waarneming-nl Jun 29, 2023
4c21ab3
Add BottomSheet
jonathan-waarneming-nl Jun 29, 2023
a317f31
Change import/export strategy
jonathan-waarneming-nl Jun 29, 2023
b4081b7
Checkbox + Chip
jonathan-waarneming-nl Jun 29, 2023
7483fb7
Add PageIndicator
jonathan-waarneming-nl Jun 29, 2023
3335a18
v0.0.26
jonathan-waarneming-nl Jul 1, 2023
59c6b75
v0.0.27
jonathan-waarneming-nl Jul 1, 2023
268a872
Add Accordion and setup jest differently
jonathan-waarneming-nl Jul 1, 2023
337a48a
Add ContentImage
jonathan-waarneming-nl Jul 1, 2023
6969520
v0.0.28
jonathan-waarneming-nl Jul 1, 2023
45e75e0
Add IconText
jonathan-waarneming-nl Jul 1, 2023
814a409
Add Date
jonathan-waarneming-nl Jul 1, 2023
9490c3f
Add Disclose
jonathan-waarneming-nl Jul 1, 2023
c78504c
Add FilterButton
jonathan-waarneming-nl Jul 1, 2023
9a5345b
Add IconView
jonathan-waarneming-nl Jul 1, 2023
94a9822
Add InputField
jonathan-waarneming-nl Jul 1, 2023
076d24f
Close Location
jonathan-waarneming-nl Jul 1, 2023
de7874b
Add Message
jonathan-waarneming-nl Jul 1, 2023
be19620
Add MoreInfo
jonathan-waarneming-nl Jul 1, 2023
d50b61e
v0.0.29
jonathan-waarneming-nl Jul 1, 2023
6ffce22
Add Notification
jonathan-waarneming-nl Jul 1, 2023
93bf8e1
Add Popup
jonathan-waarneming-nl Jul 1, 2023
6f13eeb
Add NotificationPopup
jonathan-waarneming-nl Jul 1, 2023
1c1426a
Add Panel
jonathan-waarneming-nl Jul 1, 2023
f86e9f8
Add PhotoStrip
jonathan-waarneming-nl Jul 1, 2023
30c5925
Add Pictogram
jonathan-waarneming-nl Jul 2, 2023
2aa3b2e
Add ProgressBarList
jonathan-waarneming-nl Jul 2, 2023
0459832
Add RenderHtmlWrapper
jonathan-waarneming-nl Jul 2, 2023
99ea9ff
Add Tooltip
jonathan-waarneming-nl Jul 2, 2023
a5ee3f0
Add WebLink
jonathan-waarneming-nl Jul 2, 2023
6ee4732
Set typescript properly
jonathan-waarneming-nl Jul 2, 2023
7883d61
Initial files
jonathan-waarneming-nl Jul 2, 2023
6b12bb9
Working components
jonathan-waarneming-nl Jul 2, 2023
4294f39
Add interface for packing
jonathan-waarneming-nl Jul 2, 2023
d82bdb2
v0.0.30
jonathan-waarneming-nl Jul 2, 2023
83602e3
Remove .DS_Store
jonathan-waarneming-nl Jul 2, 2023
1aa5ec1
Update gitignore
jonathan-waarneming-nl Jul 2, 2023
8d44f18
v0.0.31
jonathan-waarneming-nl Jul 2, 2023
c8e0512
v0.0.32
jonathan-waarneming-nl Jul 2, 2023
6abe187
v0.0.33
jonathan-waarneming-nl Jul 2, 2023
8b53f03
Use local translations
jonathan-waarneming-nl Jul 2, 2023
4efd833
v0.0.34
jonathan-waarneming-nl Jul 2, 2023
7993b4a
Remove react-native-reanimated
jonathan-waarneming-nl Jul 2, 2023
8652228
v0.0.35
jonathan-waarneming-nl Jul 2, 2023
8e2eba1
Rename to Translations + add Log
jonathan-waarneming-nl Jul 2, 2023
1f06d9e
Remove unused file
jonathan-waarneming-nl Jul 3, 2023
7dcbe3f
v0.0.36
jonathan-waarneming-nl Jul 4, 2023
1264b13
v0.0.37
jonathan-waarneming-nl Jul 4, 2023
d00a2ba
Review comments
jonathan-waarneming-nl Jul 4, 2023
96b248e
v0.0.38
jonathan-waarneming-nl Jul 5, 2023
0513234
Use @observation.org/react-native-image-viewing
jonathan-waarneming-nl Jul 5, 2023
4dfa325
Update README
jonathan-waarneming-nl Jul 5, 2023
7a47458
Include Fontawesome pro key
jonathan-waarneming-nl Jul 5, 2023
74fdc99
Use fontawesome in ci
jonathan-waarneming-nl Jul 5, 2023
41bb512
Test
jonathan-waarneming-nl Jul 5, 2023
ffbaae4
Test
jonathan-waarneming-nl Jul 5, 2023
57b917f
Add yarn
jonathan-waarneming-nl Jul 5, 2023
e9a0158
Small change
jonathan-waarneming-nl Jul 11, 2023
4934cba
v0.0.39
jonathan-waarneming-nl Jul 13, 2023
14cbb6d
Use repo instead of npm
jonathan-waarneming-nl Jul 20, 2023
6271945
update yarn.lock
jonathan-waarneming-nl Jul 20, 2023
27f0175
Update package.json
jonathan-waarneming-nl Jul 20, 2023
dca4df9
Ignore error
jonathan-waarneming-nl Jul 20, 2023
5bf757c
Review comments
jonathan-waarneming-nl Jul 24, 2023
537f992
Last minor changes
jonathan-waarneming-nl Jul 24, 2023
41bf399
Add comment for `FontStyle`
jonathan-waarneming-nl Jul 24, 2023
2c40c36
Remove translations
jonathan-waarneming-nl Jul 24, 2023
636573a
Use master branch of react-naitve-image-viewing
jonathan-waarneming-nl Jul 24, 2023
832d1dd
Review comments (2)
jonathan-waarneming-nl Jul 25, 2023
e2593c7
Update version to 1.0.0
jonathan-waarneming-nl Jul 25, 2023
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
62 changes: 62 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: '@react-native-community',
plugins: ['react', 'jsx-a11y', 'import', 'react-native', 'observation'],
settings: {
'import/resolver': {
node: {
paths: ['.'],
extensions: ['.js', '.jsx', '.android.js', '.ios.js', '.native.js', '.ts', '.tsx'],
},
},
},
rules: {
'observation/no-function-without-logging': 'error',
'no-shadow': 'off',
'@typescript-eslint/no-shadow': ['error'],
semi: ['error', 'never'],
'react-native/no-unused-styles': 'error',
'react-native/no-inline-styles': 'off',
'no-console': 'warn',
curly: ['error', 'multi-line'],
'prefer-destructuring': ['error'],
'import/order': [
'error',
{
groups: ['builtin', 'external', 'internal', ['parent', 'sibling']],
pathGroups: [
{
pattern: 'react+(|-native)',
group: 'external',
position: 'before',
},
],
pathGroupsExcludedImportTypes: ['react+(|-native)'],
'newlines-between': 'always',
alphabetize: {
order: 'asc',
caseInsensitive: true,
},
},
],
},
env: {
jest: true,
browser: true,
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-undef': 'off',
},
},
{
files: ['*test.ts', '*test.tsx'],
rules: {
'observation/no-function-without-logging': 'off',
},
},
],
}
11 changes: 11 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
name: CI
on: [push]
jobs:
tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Authenticate with FontAwesome Pro
run: echo "//npm.fontawesome.com/:_authToken=${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" >> .npmrc && cat .npmrc
- name: Install modules
run: yarn
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
/lib/
coverage
yarn-error.log
.DS_Store
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@fortawesome:registry=https://npm.fontawesome.com/
26 changes: 26 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
module.exports = {
// React Native 0.64.2 settings:
// bracketSpacing: false,
// jsxBracketSameLine: true,
// singleQuote: true,
// trailingComma: 'all',
// arrowParens: 'avoid',
printWidth: 120,
bracketSpacing: true,
bracketSameLine: false,
semi: false,
singleQuote: true,
trailingComma: 'all',

overrides: [
{
files: '*.xml',
options: {
printWidth: 80,
tabWidth: 4,
bracketSameLine: true,
xmlWhitespaceSensitivity: 'ignore',
},
},
],
}
25 changes: 25 additions & 0 deletions @types/accordion-collapse-react-native.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
declare module 'accordion-collapse-react-native' {
import { TouchableOpacityProps } from 'react-native'

type CollapseProps = {
isExpanded: boolean
disabled?: boolean
onToggle: (isExpanded: boolean) => void
handleLongPress?: () => void
touchableOpacityProps?: TouchableOpacityProps
children?: React.ReactNode
}
const Collapse = (_props: CollapseProps) => React.ReactNode

type CollapseHeaderProps = {
children?: React.ReactNode
}
const CollapseHeader = (_props: CollapseHeaderProps) => React.ReactNode

type CollapseBodyProps = {
children?: React.ReactNode
}
const CollapseBody = (_props: CollapseBodyProps) => React.ReactNode

export { Collapse, CollapseHeader, CollapseBody }
}
4 changes: 4 additions & 0 deletions @types/assets/index.d.ts
jonathan-waarneming-nl marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
declare module '*.svg' {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>
export default content
}
48 changes: 47 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,48 @@
# react-native-components
React Native component library
React Native component library for components used by React Native applications of Observation.org.
There are 2 kinds of components:
UI components:
- `Accordion`
- `BackButton`
- `BackgroundImage`
- `BottomSheet`
- `Checkbox`
- `Chip`
- `ContentImage`
- `Date`
- `Disclose`
- `FilterButton`
- `IconButton`
- `IconName`
- `IconText`
- `IconView`
- `Icons`
- `InputField`
- `LargeButton (+ LargeButtonProps)`
- `Icon/Icons`
- `Lightbox`
- `Location`
- `Message`
- `MoreInfo`
- `Notification`
- `NotificationPopup (+ NotificationPopupStaticProps)`
- `PageIndicator`
- `Panel`
- `PhotoStrip`
- `Popup`
- `ProgressBar`
- `ProgressBarList`
- `RenderHtmlWrapper`
- `TextLink`
- `Tooltip`
- `TooltipProps`
- `WebLink`

non-UI components:
- `I18n`: takes care of translations
- `Log.setLogConfiguration`: A function to change the logging of the component library
- `openUrl`: Opens URLs
- `useShowBlurView`: A safe way to set a blur on the background
- `theme`: A default theme with color and margins
- `font`: A set of font styles
- `text`: A set of text styles
40 changes: 40 additions & 0 deletions __mocks__/react-native-localize.js
jonathan-waarneming-nl marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
const getLocales = () => [
// you can choose / add the locales you want
{ countryCode: 'UK', languageTag: 'en-UK', languageCode: 'en', isRTL: false },
{ countryCode: 'FR', languageTag: 'fr-FR', languageCode: 'fr', isRTL: false },
]

// use a provided translation, or return undefined to test your fallback
const findBestAvailableLanguage = () => ({
languageTag: 'en',
isRTL: false,
})

const getNumberFormatSettings = () => ({
decimalSeparator: '.',
groupingSeparator: ',',
})

const getCalendar = () => 'gregorian' // or "japanese", "buddhist"
const getCountry = () => 'UK' // the country code you want
const getCurrencies = () => ['EUR'] // can be empty array
const getTemperatureUnit = () => 'celsius' // or "fahrenheit"
const getTimeZone = () => 'Europe/Paris' // the timezone you want
const uses24HourClock = () => true
const usesMetricSystem = () => true

const addEventListener = jest.fn()
const removeEventListener = jest.fn()

export { findBestAvailableLanguage,
getLocales,
getNumberFormatSettings,
getCalendar,
getCountry,
getCurrencies,
getTemperatureUnit,
getTimeZone,
uses24HourClock,
usesMetricSystem,
addEventListener,
removeEventListener }
3 changes: 3 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

De 4 plugins die wel worden gebruikt bij ObsIdentify, konden hier weg.

}
9 changes: 9 additions & 0 deletions fileTransformer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const path = require('path')

module.exports = {
process(sourceText, sourcePath, options) {
return {
code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
}
},
}
18 changes: 18 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
preset: 'react-native',
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@observation.org/react-native-image-viewing|i18n-js|react-native-scalable-image)/)',
],
setupFiles: ['./jest.mocks.js'],
collectCoverageFrom: ['**/src/**/*.{js,ts,tsx}'],
transform: {
'^.+\\.tsx?$': [
'ts-jest',
{
diagnostics: false,
jonathan-waarneming-nl marked this conversation as resolved.
Show resolved Hide resolved
},
],
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/fileTransformer.js',
},
}
30 changes: 30 additions & 0 deletions jest.mocks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/* eslint-disable observation/no-function-without-logging */
import React from 'react'
import { Image } from 'react-native'

// Mock font awesome
const Icon = 'Icon'
const getIconType = (prefix) => {
switch (prefix) {
case 'fas':
return 'solid'
case 'fal':
return 'light'
default:
throw new Error()
}
}
jest.mock('@fortawesome/react-native-fontawesome', () => ({
FontAwesomeIcon: (faIcon) => (
<Icon
testID={faIcon.testID}
color={faIcon.color}
name={faIcon.icon.iconName}
size={faIcon.size}
style={faIcon.style}
type={getIconType(faIcon.icon.prefix)}
/>
),
}))

Image.getSizeWithHeaders = jest.fn(() => Promise.resolve({ width: 0, height: 0 }))
64 changes: 64 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
{
"name": "@observation.org/react-native-components",
"version": "0.0.39",
"main": "src/index.ts",
"repository": "[email protected]:observation/react-native-components.git",
"author": "Observation.org",
"license": "MIT",
"devDependencies": {
"@react-native-community/eslint-config": "^3.2.0",
"@testing-library/react-native": "^12.1.2",
"@tsconfig/react-native": "^3.0.2",
"@types/color": "^3.0.3",
"@types/jest": "^29.5.2",
"@types/react": "^18.2.14",
"@types/react-native": "^0.72.2",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-observation": "https://github.com/observation/eslint-rules.git",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.0.0",
"jest": "^29.5.0",
"prettier": "^2.8.8",
"react": "^18.2.0",
"react-native": "^0.72.3",
"react-test-renderer": "^18.2.0",
"ts-jest": "^29.1.0",
"ts-node": "^10.9.1",
"typescript": "^4.8.4"
},
"react-native": "src/index.ts",
"scripts": {
"lint": "tsc --noEmit && eslint src",
"test": "jest",
jonathan-waarneming-nl marked this conversation as resolved.
Show resolved Hide resolved
"verify": "$npm_execpath lint && $npm_execpath test"
},
"files": [
"src"
],
"peerDependencies": {
"react": ">=18.2.0",
"react-native": ">=0.72.3"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/pro-light-svg-icons": "^6.3.0",
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
"@fortawesome/react-native-fontawesome": "^0.3.0",
"@observation.org/react-native-image-viewing": "observation/react-native-image-viewing#feature/apply-patch",
"@react-native-community/blur": "^4.2.0",
"@react-navigation/native": "^6.0.8",
"accordion-collapse-react-native": "^1.0.0",
"color": "^4.2.3",
"i18n-iso-countries": "^7.2.0",
"i18n-js": "^4.0.2",
"moment": "2.29.4",
"react-native-localize": "^2.1.9",
"react-native-logs": "^5.0.1",
"react-native-render-html": "^6.3.4",
"react-native-scalable-image": "^1.1.0"
}
}
Loading