[WIP]feat(CX-882): Reimplement OpaqueImageView #5021
Conversation
| @@ -32,7 +33,7 @@ const Show: React.FC<Props> = ({ styles, show }) => { | |||
| <View style={[styles?.container]}> | |||
| <OpaqueImageView | |||
| imageURL={imageURL} | |||
| style={[styles?.image, { overflow: "hidden", borderRadius: 2, flex: 0 }]} | |||
| style={[styles?.image, { overflow: "hidden", borderRadius: 2, flex: 0 }] as ImageStyle} | |||
There was a problem hiding this comment.
I would love to not use as ImageStyle here so any suggestions to avoid that are welcome.
When removing I'm getting the following error:
Type 'ImageStyle | undefined' is not assignable to type 'ImageStyle'.
Type 'undefined' is not assignable to type 'ImageStyle'.
There was a problem hiding this comment.
The problem is the styles?.image, which could be undefined, and the style array doesn't like it. Doing it like styles?.image ?? {} makes sure there is "something" there and not just undefined. Not perfectly clean, but I think nicer than having a typecast. What do you think?
| const sectionedArtworks = [] | ||
| // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏 | ||
| const sectionRatioSums = [] | ||
| const sectionedArtworks: GenericGrid_artworks[] = [] |
There was a problem hiding this comment.
removed some of the // @ts-expect-error
| const section = sectionedArtworks[sectionIndex] | ||
| // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏 |
There was a problem hiding this comment.
any ideas here about how to remove this as well are welcome 🤓
| const useComponentSize = () => { | ||
| const [layoutHeight, setLayoutHeight] = useState(0) | ||
| const [layoutWidth, setLayoutWidth] = useState(0) | ||
|
|
||
| constructor(props: Props) { | ||
| super(props) | ||
| const onLayout = useCallback((event) => { | ||
| const { width, height } = event.nativeEvent.layout | ||
| const scale = PixelRatio.get() | ||
| setLayoutHeight(height * scale) | ||
| setLayoutWidth(width * scale) | ||
| }, []) | ||
|
|
||
| // Unless `aspectRatio` was not specified at all, default the ratio to 1 to prevent illegal layout calculations. | ||
| const ratio = props.aspectRatio | ||
| this.state = { | ||
| aspectRatio: ratio === undefined ? undefined : ratio || 1, | ||
| } | ||
| return { layoutHeight, layoutWidth, onLayout } | ||
| } |
There was a problem hiding this comment.
We could pull this out somewhere else. Any suggestions where?
Co-Author <[email protected]>
Co-authored-by: author-name <[email protected]>
| @@ -155,7 +155,7 @@ class InfiniteScrollArtworksGrid extends React.Component<Props & PrivateProps, S | |||
| const { shouldAddPadding } = this.props | |||
| const artworkPadding = shouldAddPadding ? space(4) : 0 | |||
|
|
|||
| return (width - sectionMargins) / (this.props.sectionCount! - artworkPadding) | |||
There was a problem hiding this comment.
No idea how this calculation worked so far.. 🤔
yaml-lintAuthor: Thomas Rasshofer Description: A simple (CLI) tool to lint YAML files Homepage: https://github.com/rasshofer/yaml-lint#readme
|
| Created | about 11 years ago |
| Last Updated | 13 days ago |
| License | ISC |
| Maintainers | 1 |
| Releases | 64 |
| Keywords | YAML, parser and stringifier |
README
YAML 
yaml is a definitive library for YAML, the human friendly data serialization standard.
This library:
- Supports both YAML 1.1 and YAML 1.2 and all common data schemas,
- Passes all of the yaml-test-suite tests,
- Can accept any string as input without throwing, parsing as much YAML out of it as it can, and
- Supports parsing, modifying, and writing YAML comments and blank lines.
The library is released under the ISC open source license, and the code is available on GitHub.
It has no external dependencies and runs on Node.js as well as modern browsers.
For the purposes of versioning, any changes that break any of the documented endpoints or APIs will be considered semver-major breaking changes.
Undocumented library internals may change between minor versions, and previous APIs may be deprecated (but not removed).
For more information, see the project's documentation site: eemeli.org/yaml
To install:
npm install yamlNote: These docs are for yaml@2. For v1, see the v1.10.0 tag for the source and eemeli.org/yaml/v1 for the documentation.
API Overview
The API provided by yaml has three layers, depending on how deep you need to go: Parse & Stringify, Documents, and the underlying Lexer/Parser/Composer.
The first has the simplest API and "just works", the second gets you all the bells and whistles supported by the library along with a decent AST, and the third lets you get progressively closer to YAML source, if that's your thing.
import { parse, stringify } from 'yaml'
// or
import YAML from 'yaml'
// or
const YAML = require('yaml')Parse & Stringify
Documents
DocumentisDocument(foo): booleanparseAllDocuments(str, options?): Document[]parseDocument(str, options?): Document
Content Nodes
isAlias(foo): booleanisCollection(foo): booleanisMap(foo): booleanisNode(foo): booleanisPair(foo): booleanisScalar(foo): booleanisSeq(foo): booleannew Scalar(value)new YAMLMap()new YAMLSeq()doc.createAlias(node, name?): Aliasdoc.createNode(value, options?): Nodedoc.createPair(key, value): Pairvisit(node, visitor)
Parsing YAML
YAML.parse
# file.yml
YAML:
- A human-readable data serialization language
- https://en.wikipedia.org/wiki/YAML
yaml:
- A complete JavaScript implementation
- https://www.npmjs.com/package/yamlimport fs from 'fs'
import YAML from 'yaml'
YAML.parse('3.14159')
// 3.14159
YAML.parse('[ true, false, maybe, null ]\n')
// [ true, false, 'maybe', null ]
const file = fs.readFileSync('./file.yml', 'utf8')
YAML.parse(file)
// { YAML:
// [ 'A human-readable data serialization language',
// 'https://en.wikipedia.org/wiki/YAML' ],
// yaml:
// [ 'A complete JavaScript implementation',
// 'https://www.npmjs.com/package/yaml' ] }YAML.stringify
import YAML from 'yaml'
YAML.stringify(3.14159)
// '3.14159\n'
YAML.stringify([true, false, 'maybe', null])
// `- true
// - false
// - maybe
// - null
// `
YAML.stringify({ number: 3, plain: 'string', block: 'two\nlines\n' })
// `number: 3
// plain: string
// block: |
// two
// lines
// `Browser testing provided by:
stylelint-processor-styled-components
Author: Max Stoiber
Description: A stylelint processor for styled-components
Homepage: https://github.com/styled-components/stylelint-processor-styled-components#readme
| Created | over 5 years ago |
| Last Updated | about 2 years ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 30 |
| Direct Dependencies | @babel/parser, @babel/traverse, micromatch and postcss |
| Keywords | stylelint, processor, stylelint-processor, styled-components and lint |
README
stylelint-processor-styled-components
Lint your styled components with stylelint!
Setup
You need:
stylelint(duh)- This processor, to extract styles from
styled-components - The
stylelint-config-styled-componentsconfig to disable stylelint rules that clash withstyled-components - Your favorite
stylelintconfig! (for examplestylelint-config-recommended)
(npm install --save-dev \
stylelint \
stylelint-processor-styled-components \
stylelint-config-styled-components \
stylelint-config-recommended)
Now use those in your .stylelintrc and run stylelint with your JavaScript files!
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
]
}NOTE: The processor works with Flow- and TypeScript-typed files too! (we'll assume TypeScript usage if your files end in
.tsor.tsx)
And it also has some options. Their default values are,
{
"processors": [["stylelint-processor-styled-components", {
"moduleName": "styled-components",
"importName": "default",
"strict": false,
"ignoreFiles": [],
"parserPlugins": [
"jsx",
["decorators", { "decoratorsBeforeExport": true }],
"classProperties",
"exportExtensions",
"functionBind",
"functionSent"
]
}]]
}- Combining with
moduleName,importNameandstrict, you can tell the processor what kinds of tagged template literals to lint.
import styled, { css, keyframes } from 'styled-components';
// `importName` from `moduleName`, which means where `styled` comes from
styled(Component)``;
styled('div')``;
styled.div``;
// any other imports from `moduleName` (if `strict` is true, they will not be linted)
css``;
keyframes``;
// special extend calls, which have been deprecated in styled-components v4
Component.extend``;
-
ignoreFilesis passed to micromatch as the second parameter, which means one or more glob patterns for matching. -
parserPluginsis used to make the processor's parser be able to parse new syntaxes. All available babel parser plugins and related options can be found in Babel's website.
Documentation
Further documentation for this processor lives on the styled-components website!
F.A.Q.
Why does it throw Unexpected token? Even thought the file didn't import styled-components.
You can custom babel plugins by option.parserPlugins now. An API example is our test. But if someone can implement #231, that will be much better.
If your project includes yarn.lock or package-lock.json, an alternative cause can be that babel related dependencies, i.e. @babel/parser and @babel/traverse, are outdated, especially when linting files with new TypeScript syntaxes. You can upgrade them by removing their entries in the lockfile and reinstall dependencies.
Why does it throw unexpected lint errors?
The processor can not always parse interpolations with right things. But you can use interpolation-tagging to help it. If you have ideas to make it more intelligent, feel free to send a PR or share your solution by an new issue.
What's more, if set syntax: css-in-js in stylelint@10, it can extract styles from styled-components without this processor. Even though there are still lots of differences with this processor, we hope this processor's abilities can be migrated to stylelint totally in the future.
I don't want specified tagged template literal to be parsed, i.e. css.
You can set option.strict. More examples are in #258.
License
Licensed under the MIT License, Copyright © 2017 Maximilian Stoiber. See LICENSE.md for more information!
Based on Mapbox' excellent stylelint-processor-markdown, thanks to @davidtheclark!
stylelint-config-styled-components
Author: ismay
Description: A shareable stylelint config for stylelint-processor-styled-components
Homepage: https://github.com/styled-components/stylelint-config-styled-components#readme
| Created | over 4 years ago |
| Last Updated | over 4 years ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 1 |
| Keywords | stylelint, stylelint-config and styled-components |
README
stylelint-config-styled-components
The shareable stylelint config for stylelint-processor-styled-components
Why
When using stylelint-processor-styled-components
a couple of stylelint rules throw errors that you cannot prevent. Like
'no-empty-source' or
'no-missing-end-of-source-newline'.
This shareable config will automatically disable rules that cause unresolvable conflicts. Besides
those rules vendor prefixed properties
and values will throw an error since
styled-components automatically generates vendor prefixes for your css. Note that if you want to
change any of these rules you can always override them in your stylelint config.
Installation
npm install stylelint-config-styled-components --save-dev
Usage
After installing, add this config to your stylelint config like so:
{
"extends": "stylelint-config-styled-components"
}
If you're extending multiple shareable configs, put this config as the last so it overrides the relevant rules in all previous configs:
{
"extends": [
"stylelint-config-standard",
"stylelint-config-styled-components"
]
}
See also https://stylelint.io/user-guide/configuration for documentation on the various ways
stylelint can be configured.
License
stylelint-config-standard
Author: Stylelint
Description: Standard shareable config for Stylelint
Homepage: https://github.com/stylelint/stylelint-config-standard#readme
| Created | over 6 years ago |
| Last Updated | 21 days ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 35 |
| Direct Dependencies | stylelint-config-recommended |
| Keywords | stylelint, stylelint-config and standard |
stylelint
Author: stylelint
Description: A mighty, modern CSS linter.
Homepage: https://stylelint.io
| Created | over 7 years ago |
| Last Updated | 2 days ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 182 |
| Direct Dependencies | balanced-match, colord, cosmiconfig, css-functions-list, debug, execall, fast-glob, fastest-levenshtein, file-entry-cache, get-stdin, global-modules, globby, globjoin, html-tags, ignore, import-lazy, imurmurhash, is-plain-object, known-css-properties, mathml-tag-names, meow, micromatch, normalize-path, normalize-selector, picocolors, postcss, postcss-media-query-parser, postcss-resolve-nested-selector, postcss-safe-parser, postcss-selector-parser, postcss-value-parser, resolve-from, specificity, string-width, strip-ansi, style-search, supports-hyperlinks, svg-tags, table, v8-compile-cache and write-file-atomic |
| Keywords | css-in-js, css, less, lint, linter, markdown, sass, scss, stylelint and sugarss |
README
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Features
It's mighty as it:
- has over 170 built-in rules for modern CSS syntax and features
- supports plugins so you can create your own rules
- automatically fixes problems where possible
- is well tested with over 15000 unit tests
- supports shareable configs that you can extend or create
- is unopinionated so that you can customize it to your exact needs
- complements pretty printers like Prettier
- has a growing community and is used by Google, GitHub and WordPress
And can be extended to:
- parse CSS-like syntaxes like SCSS, Sass, Less and SugarSS
- extract embedded styles from HTML, Markdown and CSS-in-JS object & template literals
How it'll help you
It'll help you avoid errors, for example styles that are:
- invalid, e.g. malformed hex colors and named grid areas
- valid but with unintended consequences, e.g. duplicated selectors and overridden properties
And enforce conventions, for example:
- what units, functions, at-rules etc are allowed
- consistent patterns for selector names, at-rule names, custom properties etc
- maximum specificity or maximum quantity of each selector type
- your preferred notation for color functions, font weight etc
There are also rules for enforcing stylistic consistency, but we now recommend you use Stylelint alongside a pretty printer like Prettier. Linters and pretty printers are complementary tools that work together.
Example output
Guides
- User guide
- Developer guide
- Migration guide
- Maintainer guide
- About
Contributors
Stylelint is maintained by volunteers. Without the code contributions from all these fantastic people, Stylelint would not exist. Become a contributor.
Sponsors
Thank you to all our sponsors! Become a sponsor.
Backers
Thank you to all our backers! Become a backer.
Website hosting
License
luxon
Author: Isaac Cambron
Description: Immutable date wrapper
Homepage: https://github.com/moment/luxon#readme
| Created | almost 5 years ago |
| Last Updated | 11 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 124 |
| Keywords | date and immutable |
README
Luxon
Luxon is a library for working with dates and times in JavaScript.
DateTime.now().setZone("America/New_York").minus({ weeks: 1 }).endOf("day").toISO();Upgrading to 2.0
Features
- DateTime, Duration, and Interval types.
- Immutable, chainable, unambiguous API.
- Parsing and formatting for common and custom formats.
- Native time zone and Intl support (no locale or tz files).
Download/install
Documentation
Development
See contributing.
jest-styled-components
Author: Michele Bertoli
Description: Jest utilities for Styled Components
Homepage: http://npmjs.com/package/jest-styled-components
| Created | about 5 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 101 |
| Direct Dependencies | css |
@artsy/auto-config
Author: Justin Bennett
Description: Artsy's shared auto release config
Homepage: https://github.com/artsy/auto-config#readme
| Created | over 3 years ago |
| Last Updated | 20 days ago |
| License | MIT |
| Maintainers | 14 |
| Releases | 25 |
README
auto-config
Artsy's shared auto release config
react-native-fast-image
Author: Dylan Vann
Description: 🚩 FastImage, performant React Native image component.
Homepage: https://github.com/DylanVann/react-native-fast-image#readme
| Created | about 5 years ago |
| Last Updated | 4 months ago |
| License | (MIT AND Apache-2.0) |
| Maintainers | 1 |
| Releases | 115 |
| Keywords | cache, cached, fastimage, image and priority |
README
🚩 FastImage
Performant React Native image component.
FastImage example app.
React Native's Image component handles image caching like browsers
for the most part.
If the server is returning proper cache control
headers for images you'll generally get the sort of built in
caching behavior you'd have in a browser.
Even so many people have noticed:
- Flickering.
- Cache misses.
- Low performance loading from cache.
- Low performance in general.
FastImage is an Image replacement that solves these issues.
FastImage is a wrapper around
SDWebImage (iOS)
and
Glide (Android).
Features
- Aggressively cache images.
- Add authorization headers.
- Prioritize images.
- Preload images.
- GIF support.
- Border radius.
Usage
Note: You must be using React Native 0.60.0 or higher to use the most recent version of react-native-fast-image.
yarn add react-native-fast-image
cd ios && pod installimport FastImage from 'react-native-fast-image'
const YourImage = () => (
<FastImage
style={{ width: 200, height: 200 }}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
)Are you using Glide already using an AppGlideModule?
- Are you using Glide already using an AppGlideModule? (you might have problems if you don't read this)
Are you using Proguard?
If you use Proguard you will need to add these lines to android/app/proguard-rules.pro:
-keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
**[] $VALUES;
public *;
}
Properties
source?: object
Source for the remote image to load.
source.uri?: string
Remote url to load the image from. e.g. 'https://facebook.github.io/react/img/logo_og.png'.
source.headers?: object
Headers to load the image with. e.g. { Authorization: 'someAuthToken' }.
source.priority?: enum
FastImage.priority.low- Low Priority.FastImage.priority.normal(Default) - Normal Priority.FastImage.priority.high- High Priority.
source.cache?: enum
FastImage.cacheControl.immutable- (Default) - Only updates if url changes.FastImage.cacheControl.web- Use headers and follow normal caching procedures.FastImage.cacheControl.cacheOnly- Only show images from cache, do not make any network requests.
resizeMode?: enum
FastImage.resizeMode.contain- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).FastImage.resizeMode.cover(Default) - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).FastImage.resizeMode.stretch- Scale width and height independently, This may change the aspect ratio of the src.FastImage.resizeMode.center- Do not scale the image, keep centered.
onLoadStart?: () => void
Called when the image starts to load.
onProgress?: (event) => void
Called when the image is loading.
e.g. onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}
onLoad?: (event) => void
Called on a successful image fetch. Called with the width and height of the loaded image.
e.g. onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}
onError?: () => void
Called on an image fetching error.
onLoadEnd?: () => void
Called when the image finishes loading, whether it was successful or an error.
style
A React Native style. Supports using borderRadius.
fallback: boolean
If true will fallback to using Image.
In this case the image will still be styled and laid out the same way as FastImage.
tintColor?: number | string
If supplied, changes the color of all the non-transparent pixels to the given color.
Static Methods
FastImage.preload: (source[]) => void
Preload images to display later. e.g.
FastImage.preload([
{
uri: 'https://facebook.github.io/react/img/logo_og.png',
headers: { Authorization: 'someAuthToken' },
},
{
uri: 'https://facebook.github.io/react/img/logo_og.png',
headers: { Authorization: 'someAuthToken' },
},
])FastImage.clearMemoryCache: () => Promise<void>
Clear all images from memory cache.
FastImage.clearDiskCache: () => Promise<void>
Clear all images from disk cache.
Troubleshooting
If you have any problems using this library try the steps in troubleshooting and see if they fix it.
Development
Follow these instructions to get the example app running.
Supported React Native Versions
This project only aims to support the latest version of React Native.
This simplifies the development and the testing of the project.
If you require new features or bug fixes for older versions you can fork this project.
Credits
The idea for this modules came from
vovkasm's
react-native-web-image
package.
It also uses Glide and SDWebImage, but didn't have some features I needed (priority, headers).
Thanks to @mobinni for helping with the conceptualization
Licenses
New dependencies added: react-native-fast-image, @artsy/auto-config, jest-styled-components, luxon, stylelint, stylelint-config-standard, stylelint-config-styled-components, stylelint-processor-styled-components, yaml and yaml-lint.
Hi there! 👋
We're trialing semantic commit formatting which has not been detected in your PR title.
Refer to this RFC and Conventional Commits for PR/commit formatting guidelines.
1 similar comment
yaml-lintAuthor: Thomas Rasshofer Description: A simple (CLI) tool to lint YAML files Homepage: https://github.com/rasshofer/yaml-lint#readme
|
| Created | about 11 years ago |
| Last Updated | 13 days ago |
| License | ISC |
| Maintainers | 1 |
| Releases | 64 |
| Keywords | YAML, parser and stringifier |
README
YAML
yaml is a definitive library for YAML, the human friendly data serialization standard.
This library:
- Supports both YAML 1.1 and YAML 1.2 and all common data schemas,
- Passes all of the yaml-test-suite tests,
- Can accept any string as input without throwing, parsing as much YAML out of it as it can, and
- Supports parsing, modifying, and writing YAML comments and blank lines.
The library is released under the ISC open source license, and the code is available on GitHub.
It has no external dependencies and runs on Node.js as well as modern browsers.
For the purposes of versioning, any changes that break any of the documented endpoints or APIs will be considered semver-major breaking changes.
Undocumented library internals may change between minor versions, and previous APIs may be deprecated (but not removed).
For more information, see the project's documentation site: eemeli.org/yaml
To install:
npm install yamlNote: These docs are for yaml@2. For v1, see the v1.10.0 tag for the source and eemeli.org/yaml/v1 for the documentation.
API Overview
The API provided by yaml has three layers, depending on how deep you need to go: Parse & Stringify, Documents, and the underlying Lexer/Parser/Composer.
The first has the simplest API and "just works", the second gets you all the bells and whistles supported by the library along with a decent AST, and the third lets you get progressively closer to YAML source, if that's your thing.
import { parse, stringify } from 'yaml'
// or
import YAML from 'yaml'
// or
const YAML = require('yaml')Parse & Stringify
Documents
DocumentisDocument(foo): booleanparseAllDocuments(str, options?): Document[]parseDocument(str, options?): Document
Content Nodes
isAlias(foo): booleanisCollection(foo): booleanisMap(foo): booleanisNode(foo): booleanisPair(foo): booleanisScalar(foo): booleanisSeq(foo): booleannew Scalar(value)new YAMLMap()new YAMLSeq()doc.createAlias(node, name?): Aliasdoc.createNode(value, options?): Nodedoc.createPair(key, value): Pairvisit(node, visitor)
Parsing YAML
YAML.parse
# file.yml
YAML:
- A human-readable data serialization language
- https://en.wikipedia.org/wiki/YAML
yaml:
- A complete JavaScript implementation
- https://www.npmjs.com/package/yamlimport fs from 'fs'
import YAML from 'yaml'
YAML.parse('3.14159')
// 3.14159
YAML.parse('[ true, false, maybe, null ]\n')
// [ true, false, 'maybe', null ]
const file = fs.readFileSync('./file.yml', 'utf8')
YAML.parse(file)
// { YAML:
// [ 'A human-readable data serialization language',
// 'https://en.wikipedia.org/wiki/YAML' ],
// yaml:
// [ 'A complete JavaScript implementation',
// 'https://www.npmjs.com/package/yaml' ] }YAML.stringify
import YAML from 'yaml'
YAML.stringify(3.14159)
// '3.14159\n'
YAML.stringify([true, false, 'maybe', null])
// `- true
// - false
// - maybe
// - null
// `
YAML.stringify({ number: 3, plain: 'string', block: 'two\nlines\n' })
// `number: 3
// plain: string
// block: |
// two
// lines
// `Browser testing provided by:
stylelint-processor-styled-components
Author: Max Stoiber
Description: A stylelint processor for styled-components
Homepage: https://github.com/styled-components/stylelint-processor-styled-components#readme
| Created | over 5 years ago |
| Last Updated | about 2 years ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 30 |
| Direct Dependencies | @babel/parser, @babel/traverse, micromatch and postcss |
| Keywords | stylelint, processor, stylelint-processor, styled-components and lint |
README
stylelint-processor-styled-components
Lint your styled components with stylelint!
Setup
You need:
stylelint(duh)- This processor, to extract styles from
styled-components - The
stylelint-config-styled-componentsconfig to disable stylelint rules that clash withstyled-components - Your favorite
stylelintconfig! (for examplestylelint-config-recommended)
(npm install --save-dev \
stylelint \
stylelint-processor-styled-components \
stylelint-config-styled-components \
stylelint-config-recommended)
Now use those in your .stylelintrc and run stylelint with your JavaScript files!
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
]
}NOTE: The processor works with Flow- and TypeScript-typed files too! (we'll assume TypeScript usage if your files end in
.tsor.tsx)
And it also has some options. Their default values are,
{
"processors": [["stylelint-processor-styled-components", {
"moduleName": "styled-components",
"importName": "default",
"strict": false,
"ignoreFiles": [],
"parserPlugins": [
"jsx",
["decorators", { "decoratorsBeforeExport": true }],
"classProperties",
"exportExtensions",
"functionBind",
"functionSent"
]
}]]
}- Combining with
moduleName,importNameandstrict, you can tell the processor what kinds of tagged template literals to lint.
import styled, { css, keyframes } from 'styled-components';
// `importName` from `moduleName`, which means where `styled` comes from
styled(Component)``;
styled('div')``;
styled.div``;
// any other imports from `moduleName` (if `strict` is true, they will not be linted)
css``;
keyframes``;
// special extend calls, which have been deprecated in styled-components v4
Component.extend``;
-
ignoreFilesis passed to micromatch as the second parameter, which means one or more glob patterns for matching. -
parserPluginsis used to make the processor's parser be able to parse new syntaxes. All available babel parser plugins and related options can be found in Babel's website.
Documentation
Further documentation for this processor lives on the styled-components website!
F.A.Q.
Why does it throw Unexpected token? Even thought the file didn't import styled-components.
You can custom babel plugins by option.parserPlugins now. An API example is our test. But if someone can implement #231, that will be much better.
If your project includes yarn.lock or package-lock.json, an alternative cause can be that babel related dependencies, i.e. @babel/parser and @babel/traverse, are outdated, especially when linting files with new TypeScript syntaxes. You can upgrade them by removing their entries in the lockfile and reinstall dependencies.
Why does it throw unexpected lint errors?
The processor can not always parse interpolations with right things. But you can use interpolation-tagging to help it. If you have ideas to make it more intelligent, feel free to send a PR or share your solution by an new issue.
What's more, if set syntax: css-in-js in stylelint@10, it can extract styles from styled-components without this processor. Even though there are still lots of differences with this processor, we hope this processor's abilities can be migrated to stylelint totally in the future.
I don't want specified tagged template literal to be parsed, i.e. css.
You can set option.strict. More examples are in #258.
License
Licensed under the MIT License, Copyright © 2017 Maximilian Stoiber. See LICENSE.md for more information!
Based on Mapbox' excellent stylelint-processor-markdown, thanks to @davidtheclark!
stylelint-config-styled-components
Author: ismay
Description: A shareable stylelint config for stylelint-processor-styled-components
Homepage: https://github.com/styled-components/stylelint-config-styled-components#readme
| Created | over 4 years ago |
| Last Updated | over 4 years ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 1 |
| Keywords | stylelint, stylelint-config and styled-components |
README
stylelint-config-styled-components
The shareable stylelint config for stylelint-processor-styled-components
Why
When using stylelint-processor-styled-components
a couple of stylelint rules throw errors that you cannot prevent. Like
'no-empty-source' or
'no-missing-end-of-source-newline'.
This shareable config will automatically disable rules that cause unresolvable conflicts. Besides
those rules vendor prefixed properties
and values will throw an error since
styled-components automatically generates vendor prefixes for your css. Note that if you want to
change any of these rules you can always override them in your stylelint config.
Installation
npm install stylelint-config-styled-components --save-dev
Usage
After installing, add this config to your stylelint config like so:
{
"extends": "stylelint-config-styled-components"
}
If you're extending multiple shareable configs, put this config as the last so it overrides the relevant rules in all previous configs:
{
"extends": [
"stylelint-config-standard",
"stylelint-config-styled-components"
]
}
See also https://stylelint.io/user-guide/configuration for documentation on the various ways
stylelint can be configured.
License
stylelint-config-standard
Author: Stylelint
Description: Standard shareable config for Stylelint
Homepage: https://github.com/stylelint/stylelint-config-standard#readme
| Created | over 6 years ago |
| Last Updated | 21 days ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 35 |
| Direct Dependencies | stylelint-config-recommended |
| Keywords | stylelint, stylelint-config and standard |
stylelint
Author: stylelint
Description: A mighty, modern CSS linter.
Homepage: https://stylelint.io
| Created | over 7 years ago |
| Last Updated | 2 days ago |
| License | MIT |
| Maintainers | 6 |
| Releases | 182 |
| Direct Dependencies | balanced-match, colord, cosmiconfig, css-functions-list, debug, execall, fast-glob, fastest-levenshtein, file-entry-cache, get-stdin, global-modules, globby, globjoin, html-tags, ignore, import-lazy, imurmurhash, is-plain-object, known-css-properties, mathml-tag-names, meow, micromatch, normalize-path, normalize-selector, picocolors, postcss, postcss-media-query-parser, postcss-resolve-nested-selector, postcss-safe-parser, postcss-selector-parser, postcss-value-parser, resolve-from, specificity, string-width, strip-ansi, style-search, supports-hyperlinks, svg-tags, table, v8-compile-cache and write-file-atomic |
| Keywords | css-in-js, css, less, lint, linter, markdown, sass, scss, stylelint and sugarss |
README
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Features
It's mighty as it:
- has over 170 built-in rules for modern CSS syntax and features
- supports plugins so you can create your own rules
- automatically fixes problems where possible
- is well tested with over 15000 unit tests
- supports shareable configs that you can extend or create
- is unopinionated so that you can customize it to your exact needs
- complements pretty printers like Prettier
- has a growing community and is used by Google, GitHub and WordPress
And can be extended to:
- parse CSS-like syntaxes like SCSS, Sass, Less and SugarSS
- extract embedded styles from HTML, Markdown and CSS-in-JS object & template literals
How it'll help you
It'll help you avoid errors, for example styles that are:
- invalid, e.g. malformed hex colors and named grid areas
- valid but with unintended consequences, e.g. duplicated selectors and overridden properties
And enforce conventions, for example:
- what units, functions, at-rules etc are allowed
- consistent patterns for selector names, at-rule names, custom properties etc
- maximum specificity or maximum quantity of each selector type
- your preferred notation for color functions, font weight etc
There are also rules for enforcing stylistic consistency, but we now recommend you use Stylelint alongside a pretty printer like Prettier. Linters and pretty printers are complementary tools that work together.
Example output
Guides
- User guide
- Developer guide
- Migration guide
- Maintainer guide
- About
Contributors
Stylelint is maintained by volunteers. Without the code contributions from all these fantastic people, Stylelint would not exist. Become a contributor.
Sponsors
Thank you to all our sponsors! Become a sponsor.
Backers
Thank you to all our backers! Become a backer.
Website hosting
License
luxon
Author: Isaac Cambron
Description: Immutable date wrapper
Homepage: https://github.com/moment/luxon#readme
| Created | almost 5 years ago |
| Last Updated | 11 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 124 |
| Keywords | date and immutable |
README
Luxon
Luxon is a library for working with dates and times in JavaScript.
DateTime.now().setZone("America/New_York").minus({ weeks: 1 }).endOf("day").toISO();Upgrading to 2.0
Features
- DateTime, Duration, and Interval types.
- Immutable, chainable, unambiguous API.
- Parsing and formatting for common and custom formats.
- Native time zone and Intl support (no locale or tz files).
Download/install
Documentation
Development
See contributing.
jest-styled-components
Author: Michele Bertoli
Description: Jest utilities for Styled Components
Homepage: http://npmjs.com/package/jest-styled-components
| Created | about 5 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 101 |
| Direct Dependencies | css |
@artsy/auto-config
Author: Justin Bennett
Description: Artsy's shared auto release config
Homepage: https://github.com/artsy/auto-config#readme
| Created | over 3 years ago |
| Last Updated | 20 days ago |
| License | MIT |
| Maintainers | 14 |
| Releases | 25 |
README
auto-config
Artsy's shared auto release config
react-native-fast-image
Author: Dylan Vann
Description: 🚩 FastImage, performant React Native image component.
Homepage: https://github.com/DylanVann/react-native-fast-image#readme
| Created | about 5 years ago |
| Last Updated | 4 months ago |
| License | (MIT AND Apache-2.0) |
| Maintainers | 1 |
| Releases | 115 |
| Keywords | cache, cached, fastimage, image and priority |
README
🚩 FastImage
Performant React Native image component.
FastImage example app.
React Native's Image component handles image caching like browsers
for the most part.
If the server is returning proper cache control
headers for images you'll generally get the sort of built in
caching behavior you'd have in a browser.
Even so many people have noticed:
- Flickering.
- Cache misses.
- Low performance loading from cache.
- Low performance in general.
FastImage is an Image replacement that solves these issues.
FastImage is a wrapper around
SDWebImage (iOS)
and
Glide (Android).
Features
- Aggressively cache images.
- Add authorization headers.
- Prioritize images.
- Preload images.
- GIF support.
- Border radius.
Usage
Note: You must be using React Native 0.60.0 or higher to use the most recent version of react-native-fast-image.
yarn add react-native-fast-image
cd ios && pod installimport FastImage from 'react-native-fast-image'
const YourImage = () => (
<FastImage
style={{ width: 200, height: 200 }}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
)Are you using Glide already using an AppGlideModule?
- Are you using Glide already using an AppGlideModule? (you might have problems if you don't read this)
Are you using Proguard?
If you use Proguard you will need to add these lines to android/app/proguard-rules.pro:
-keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
**[] $VALUES;
public *;
}
Properties
source?: object
Source for the remote image to load.
source.uri?: string
Remote url to load the image from. e.g. 'https://facebook.github.io/react/img/logo_og.png'.
source.headers?: object
Headers to load the image with. e.g. { Authorization: 'someAuthToken' }.
source.priority?: enum
FastImage.priority.low- Low Priority.FastImage.priority.normal(Default) - Normal Priority.FastImage.priority.high- High Priority.
source.cache?: enum
FastImage.cacheControl.immutable- (Default) - Only updates if url changes.FastImage.cacheControl.web- Use headers and follow normal caching procedures.FastImage.cacheControl.cacheOnly- Only show images from cache, do not make any network requests.
resizeMode?: enum
FastImage.resizeMode.contain- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).FastImage.resizeMode.cover(Default) - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).FastImage.resizeMode.stretch- Scale width and height independently, This may change the aspect ratio of the src.FastImage.resizeMode.center- Do not scale the image, keep centered.
onLoadStart?: () => void
Called when the image starts to load.
onProgress?: (event) => void
Called when the image is loading.
e.g. onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}
onLoad?: (event) => void
Called on a successful image fetch. Called with the width and height of the loaded image.
e.g. onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}
onError?: () => void
Called on an image fetching error.
onLoadEnd?: () => void
Called when the image finishes loading, whether it was successful or an error.
style
A React Native style. Supports using borderRadius.
fallback: boolean
If true will fallback to using Image.
In this case the image will still be styled and laid out the same way as FastImage.
tintColor?: number | string
If supplied, changes the color of all the non-transparent pixels to the given color.
Static Methods
FastImage.preload: (source[]) => void
Preload images to display later. e.g.
FastImage.preload([
{
uri: 'https://facebook.github.io/react/img/logo_og.png',
headers: { Authorization: 'someAuthToken' },
},
{
uri: 'https://facebook.github.io/react/img/logo_og.png',
headers: { Authorization: 'someAuthToken' },
},
])FastImage.clearMemoryCache: () => Promise<void>
Clear all images from memory cache.
FastImage.clearDiskCache: () => Promise<void>
Clear all images from disk cache.
Troubleshooting
If you have any problems using this library try the steps in troubleshooting and see if they fix it.
Development
Follow these instructions to get the example app running.
Supported React Native Versions
This project only aims to support the latest version of React Native.
This simplifies the development and the testing of the project.
If you require new features or bug fixes for older versions you can fork this project.
Credits
The idea for this modules came from
vovkasm's
react-native-web-image
package.
It also uses Glide and SDWebImage, but didn't have some features I needed (priority, headers).
Thanks to @mobinni for helping with the conceptualization
Licenses
New dependencies added: react-native-fast-image, @artsy/auto-config, jest-styled-components, luxon, stylelint, stylelint-config-standard, stylelint-config-styled-components, stylelint-processor-styled-components, yaml and yaml-lint.
Hi there! 👋
We're trialing semantic commit formatting which has not been detected in your PR title.
Refer to this RFC and Conventional Commits for PR/commit formatting guidelines.
The type of this PR is: Enhancement
This PR resolves CX-882
Description
The problem that this ticket solves is to get Images to load on Android in a similar and more performant way as they do in iOS.
For this reason we decided to go with
react-native-fast-imagelibrary.This PR reimplements OpaqueImageView (which is the component that renders most of our Images) and also:
AROpaqueImageViewand replaces that with<OpaqueImageView />AROpaqueImageViewFastImage component requires height and width in contrast with the Image component from react-native. This is why I added the height/width props in some cases like this: src/lib/Components/ArtworkGrids/ArtworkGridItem.tsx
Need to be fixed
PR Checklist (tick all before merging)