aholachek / storybook-mobile Goto Github PK
View Code? Open in Web Editor NEW[Deprecated] A storybook addon that helps you create truly mobile-friendly components
[Deprecated] A storybook addon that helps you create truly mobile-friendly components
@aholachek I watched your talk on mobile animations, it was great! I just wanted to say thanks for all your amazing work. I'm really excited to try this addon out soon (in the middle of upgrading storybook to 6.0)
To ensure your users benefit from momentum scrolling, add this line of CSS: -webkit-overflow-scrolling:touch; to any container with a style of overflow: auto or overflow: scroll.
The above rule is applied when overflow is in a state other than auto or scroll. If this is expected behavior, it should add etc. to the language or list out the possibilities. If not, the check should look for auto or scroll.
Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules
Hi!
I was really eager to try your addon as it sounds amazing.
Unfortunately, when I tried, I got an error (which crashed my whole storybook)
Document.querySelector: 'label for="zen-form-0-localisation"'
Uncaught DOMException: Document.querySelector: 'label for="zen-form-0-localisation"' is not a valid selector
---------------------------------
The above error occurred in the <Hints> component:
in Hints (created by Context.Consumer)
in WithTheme(Hints) (created by MyPanel)
in MyPanel
in StateWrapper
in div (created by AddonPanel)
in AddonPanel
in div (created by Context.Consumer)
in Styled(div)
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in ManagerConsumer (created by _default)
in _default (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout)
in Unknown
in Unknown
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown (created by SizeMeRenderer(Component))
in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
in SizeMeRenderer(Component) (created by SizeMe(Component))
in SizeMe(Component) (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in Location (created by QueryLocation)
in QueryLocation (created by Root)
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root
React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
---------------------------------
SyntaxError: Document.querySelector: 'label for="zen-form-0-localisation"' is not a valid selector
---------------------------------
The above error occurred in the <LocationProvider> component:
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
---------------------------------
SyntaxError: Document.querySelector: 'label for="zen-form-0-localisation"' is not a valid selector
I hope this report can help you find the issue.
Again, great job!
Currently incompatible with S6.5 and R18.
Need to do a major version increment to support the latest SB and React.
First, this add-on is very ambitious and it's awesome. Really nice work!
I'm having an issue however, I'm getting really laggy performance. On stories that assemble several components, for example, to show a complete page layout, I can't even move between stories, SB hangs. Have you tried this add-on with large codebases?
Can the panel be turned OFF by default, then enabled through some control?
When including the addon it shows the error react.development.js:312 Warning: Each child in a list should have a unique "key" prop.
on startup, is there a way to fix it?
I am using storybook v6.0.21
The Hints
component uses deprecated emotion-theming
imports. After adding storybook-mobile
, an error is thrown:
WARN Failed to load preset: {"name":"/Users/lex/Projects/FLDV/TEMPLATES/unistack/packages/ui/node_modules/storybook-mobile/register.js","options":{}} on level 1
ERR! Error: `emotion-theming` has been removed and all its exports were moved to `@emotion/react` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/react'`.
storybook-mobile
to your list of addonsstorybook-start
The preset should load without throwing an error.
v16.0.0
6.4.0-beta.30
0.1.32
emotion-theming
with @emotion/react
in package.json#dependencies
withTheme
import: import { withTheme } from '@emotion/react'
.storybook/main.ts
:
import { browserConfig } from '@flex-development/unipack'
import type { Options } from '@storybook/core-common'
import type { StorybookConfig } from '@storybook/react/types'
import Dotenv from 'dotenv-webpack'
import type { PropItem } from 'react-docgen-typescript'
import type { Component } from 'react-docgen-typescript/lib/parser'
import { loadSync as tsconfigLoad } from 'tsconfig/dist/tsconfig'
import { Configuration } from 'webpack'
/**
* @file Storybook Configuration
* @module storybook/main
* @see https://storybook.js.org/docs/react/configure/overview
*/
const config: StorybookConfig = {
addons: [
{ name: '@storybook/addon-essentials', options: {} },
{ name: '@whitespace/storybook-addon-html', options: {} },
{ name: '@storybook/addon-a11y', options: {} },
{ name: '@storybook/addon-jest/dist/cjs', options: {} },
{ name: 'chromatic/storybook-addon', options: {} },
{ name: 'storybook-mobile', options: {} }
],
core: {
builder: 'webpack5'
},
features: {
breakingChangesV7: true,
buildStoriesJson: true,
interactionsDebugger: true,
modernInlineRender: true,
storyStoreV7: false
},
framework: { name: '@storybook/react', options: {} },
logLevel: 'debug',
reactOptions: {
fastRefresh: true,
strictMode: false
},
staticDirs: ['../../../apps/dashboard/public'],
stories: [
'../src/index.stories.mdx',
'../src/blocks/*.stories.mdx',
'../src/lib/**/**/*.stories.@(mdx|tsx)'
],
typescript: {
check: true,
checkOptions: {
typescript: {
configFile: process.env.UNIPACK_TSCONFIG,
memoryLimit: 9999
}
},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
...tsconfigLoad('./tsconfig.docgen.json').config,
/**
* Omits certain props from documentation generation.
*
* @param {PropItem} prop - Prop data
* @param {Component} component - Component data
* @param {string} component.name - Name of component
* @return {boolean} `false` if prop should be omitted, `true` otherwise
*/
propFilter: (prop: PropItem, component: Component): boolean => {
if (prop.parent && prop.parent.fileName.includes('@types/react')) {
if (prop.name.startsWith('aria-')) return false
if (prop.name.startsWith('on')) return false
}
return true
},
savePropValueAsString: false,
shouldExtractLiteralValuesFromEnum: true,
shouldExtractValuesFromUnion: true,
shouldRemoveUndefinedFromOptional: false,
skipChildrenPropWithoutDoc: true,
tsconfigPath: process.env. UNIPACK_TSCONFIG
}
},
/**
* Alters the native Webpack configuration.
*
* @param {Configuration} config - Storybook Webpack configuration
* @param {Options} options - Storybook builder, CLI, and loader options
* @return {Configuration} Modified Webpack configuration
*/
webpackFinal: (config: Configuration, options: Options): Configuration => {
// Get path to environment file
const ENVPATH = `./.env.${process.env.NODE_ENV}`
// ! Replace Dotenv plugin defined by Storybook to fix `TypeError: cannot
// ! use 'in' operator to search for "TS_JEST_DEBUG" in "MISSING_ENV_VAR"`
config.plugins.unshift(
new Dotenv({
allowEmptyValues: true,
defaults: `${process.cwd()}/.env.defaults`,
expand: true,
// `process.env` is not polyfilled in Webpack 5+, leading to errors in
// environments where `process` is `null` (browsers)
/** @see https://github.com/mrsteele/dotenv-webpack#processenv-stubbing--replacing */
ignoreStub: true,
path: ENVPATH,
safe: ENVPATH
})
)
// Override DefinePlugin definitions
// ! Fixes `Unexpected identifier ':'`
config.plugins = config.plugins.map(plugin => {
if (plugin.constructor.name === 'DefinePlugin') {
plugin['definitions']['process.env'] = `'${JSON.stringify({
DEBUG: process.env.DEBUG,
NODE_ENV: process.env.NODE_ENV,
NODE_OPTIONS: process.env.NODE_OPTIONS,
npm_package_name: process.env.npm_package_name,
npm_package_version: process.env.npm_package_version
})}'`
}
return plugin
})
// ! Fixes `upath.normalize is not a function`
/** @see https://github.com/storybookjs/storybook/issues/14856 */
config.resolve.fallback['path'] = require.resolve('path-browserify')
// ! Fixes `Module not found: Can't resolve '*'`
config.resolve.fallback['tty'] = require.resolve('tty-browserify')
config.resolve.fallback['util'] = require.resolve('util/')
// Set webpack target
config.target = 'web'
return browserConfig(config)
}
}
export default config
Creating a react component library where components that use react hooks that have storybook and storybook-mobile throw a hooks error in a consuming react app that uses said library.
The issue is very likely caused by this project's package.json's devDependencies including react
and react-dom
when they should be only peerDependencies
.
I'm unsure of exactly what the cleanest way to solve this is, but I believe it's moving react-dom
to peerDependencies
and ensuring that both react
and react-dom
are not in dependencies
or devDependencies
. You'll also likely want to update the steps for working on this addon locally to mention that those will need to be fetched manually to dev this addon, I suggest npm i --no-save react react-dom
.
I'd be happy to PR this if it sounds good to the main contributor(s).
https://gitlab.com/gaiety/react-peer-dependencies-storybook-mobile-repro (should just be able to yarn
in both, yarn start
in the app)
npx create-react-library library
using all default optionsnpx create-react-app app
./library/src/index.js
to use a React hook, such as:import React, { useState } from 'react'
export const ExampleComponent = () => {
const [foo] = useState('example')
return <div>Example Component: {foo}</div>
}
./library/package.json
to remove react
and react-dom
from the devDependencies
, and add react-dom
to the peerDependencies
./library
install storybook with npx sb init
./app/package.json
to consume the library adding "library": "link:../library",
to its dependencies./app/src/App.js
to use this component like so:import { ExampleComponent } from 'library';
//... then somewhere in the returned JSX
<ExampleComponent />
./library
run yarn
and then yarn build
yarn
and then yarn start
Observe at this point that the app works, showing the component that uses hooks flawlessly in the browser
Also observe that there is noreact
orreact-dom
in the library'snode_modules
directory
storybook-mobile
into the library following this project's getting started steps then yarn start
the app againObserve the classic and cryptic
Error: Invalid hook call.
appears, signifying in this case multiple copies of react exist.
Also observe that there is now areact
andreact-dom
in the library'snode_modules
directory
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.