-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e53708e
commit e297d23
Showing
579 changed files
with
18,647 additions
and
3,639 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,50 +1,14 @@ | ||
module.exports = { | ||
root: true, | ||
extends: '@react-native', | ||
plugins: ['test-id', 'import'], | ||
"rules": { | ||
"react-native/no-inline-styles": "off", | ||
extends: [ | ||
'@web3-wallet/eslint-config/base', | ||
'@web3-wallet/eslint-config/import', | ||
'@web3-wallet/eslint-config/mobile', | ||
'@web3-wallet/eslint-config/testing-library', | ||
], | ||
plugins: ['test-id', 'jest'], | ||
rules: { | ||
'@typescript-eslint/no-explicit-any': 'warn', | ||
'test-id/pascalcase': 'error', | ||
'jest/no-disabled-tests':'off', | ||
"@typescript-eslint/no-explicit-any": "warn", | ||
"sort-imports": ["error", { "ignoreDeclarationSort": true }], | ||
"import/newline-after-import": ["error", { "count": 1 }], | ||
'import/no-extraneous-dependencies': 'error', | ||
'import/order': [ | ||
'error', | ||
{ | ||
"newlines-between": "always-and-inside-groups", | ||
alphabetize: { | ||
order: 'asc', | ||
caseInsensitive: true | ||
}, | ||
groups: [ | ||
'external', | ||
'builtin', | ||
'internal', | ||
'parent', | ||
'sibling', | ||
'index', | ||
'type' | ||
], | ||
pathGroups: [ | ||
{ | ||
pattern: 'react*', | ||
group: 'external', | ||
position: 'before', | ||
}, | ||
{ | ||
pattern: '@/**', | ||
group: 'parent', | ||
position: 'before', | ||
}, | ||
{ | ||
pattern: '/**', | ||
group: 'object', | ||
position: 'after', | ||
}, | ||
], | ||
}, | ||
], | ||
'jest/no-disabled-tests': 'off', | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -97,4 +97,5 @@ default.realm.note | |
# typescript-coverage-report | ||
coverage-ts | ||
|
||
.env | ||
.env | ||
.env.storybook |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,14 @@ | ||
module.exports = { | ||
printWidth: 160, | ||
bracketSpacing: true, | ||
jsxBracketSameLine: true, | ||
singleQuote: true, | ||
trailingComma: 'all', | ||
arrowParens: 'avoid', | ||
overrides: [ | ||
{ | ||
files: '*.yaml', | ||
options: { | ||
singleQuote: false | ||
} | ||
singleQuote: false, | ||
}, | ||
}, | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
# Storybook README | ||
|
||
## Introduction | ||
|
||
Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and more. It allows us to showcase components interactively in an isolated development environment. | ||
|
||
This README will guide you through setting up and using Storybook within our project. | ||
|
||
## Why Storybook? | ||
|
||
- **Isolation**: Develop hard-to-reach states and edge cases. | ||
- **Organization**: Catalogue our UI components and use them like building blocks. | ||
- **Documentation**: Automatically generate a visual documentation of our components. | ||
- **Collaboration**: Easier to share our work with the wider team. | ||
|
||
## Setup | ||
|
||
Create a .env.storybook file in the root of your repository. This file will contain environment variables specific to Storybook. Add the following line to enable Storybook: | ||
``` | ||
STORYBOOK_ENABLED=true | ||
``` | ||
|
||
## Writing Stories | ||
|
||
Stories capture the rendered state of a UI component. They are stored in files ending with `.stories.tsx`. Here's how you can write a story: | ||
|
||
```tsx | ||
import React from 'react'; | ||
import { View } from 'react-native'; | ||
|
||
import { Button } from './Button'; | ||
|
||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
const ButtonMeta: Meta<typeof Button> = { | ||
title: 'Button', | ||
component: Button, | ||
args: { | ||
variant: 'primary', | ||
}, | ||
decorators: [ | ||
Story => ( | ||
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}> | ||
<Story /> | ||
</View> | ||
), | ||
], | ||
}; | ||
|
||
export default ButtonMeta; | ||
|
||
export const Basic: StoryObj<typeof Button> = {}; | ||
``` | ||
|
||
### Custom argTypes | ||
Every component should be accompanied by a story that exemplifies its essential functionality. When a component supports diverse use cases, consider adding distinct stories to reflect its adaptability. To demonstrate prop variations, leverage `argTypes` within your stories. For intricate or specialized prop interactions, you can define [custom argTypes](https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes). | ||
```js | ||
const ButtonMeta: Meta<typeof Button> = { | ||
title: 'Button', | ||
component: Button, | ||
args: { | ||
variant: 'primary', | ||
}, | ||
argTypes: { | ||
color: { | ||
options: ['primary', 'dark', 'light'], | ||
control: { type: 'select' }, | ||
}, | ||
fontSize: { | ||
options: ["lg", "md", "sm"], | ||
mapping: { | ||
"lg": "text-lg", | ||
"md": "text-md", | ||
"sm": "text-sm", | ||
}, | ||
control: { type: 'select' }, | ||
}, | ||
} | ||
}; | ||
``` | ||
For more detailed guidance on story composition, consult the [Storybook Stories documentation](https://storybook.js.org/docs/get-started/whats-a-story). | ||
|
||
### Custom render function | ||
|
||
To implement a custom render function that includes additional logic, such as side effects from useEffect, you can utilize the render function as follows: | ||
```js | ||
const ButtonMeta: Meta<typeof Button> = { | ||
title: 'Button', | ||
component: Button, | ||
render: function Render(args) { | ||
const [count, setCount] = useState(0); | ||
|
||
return ( | ||
<Button {...args} onClick={() => setCount(count + 1)}> | ||
{count} | ||
</Button> | ||
) | ||
} | ||
}; | ||
``` | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import AsyncStorage from '@react-native-async-storage/async-storage'; | ||
import { view } from './storybook.requires'; | ||
import { krakenTheme } from './theme'; | ||
|
||
const StorybookUIRoot = view.getStorybookUI({ | ||
theme: krakenTheme, | ||
storage: { | ||
getItem: AsyncStorage.getItem, | ||
setItem: AsyncStorage.setItem, | ||
}, | ||
}); | ||
|
||
export default StorybookUIRoot; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { StorybookConfig } from '@storybook/react-native'; | ||
|
||
const main: StorybookConfig = { | ||
stories: [ | ||
'../src/components/**/*.stories.?(ts|tsx|js|jsx)' | ||
], | ||
addons: [ | ||
'@storybook/addon-ondevice-controls', | ||
'@storybook/addon-ondevice-actions' | ||
], | ||
}; | ||
|
||
export default main; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import React from 'react'; | ||
import RNBootSplash from 'react-native-bootsplash'; | ||
import { StyleSheet, View } from 'react-native'; | ||
import type { Preview } from '@storybook/react'; | ||
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'; | ||
import { NavigationContainer } from '@react-navigation/native'; | ||
import { GestureHandlerRootView } from 'react-native-gesture-handler'; | ||
import { SafeAreaProvider } from 'react-native-safe-area-context'; | ||
import { SuperDarkTheme } from '../src/theme/themes'; | ||
|
||
RNBootSplash.hide(); | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
flex: 1, | ||
backgroundColor: SuperDarkTheme.colors.background, | ||
justifyContent: 'center', | ||
}, | ||
}); | ||
|
||
const preview: Preview = { | ||
decorators: [ | ||
Story => ( | ||
<GestureHandlerRootView> | ||
<SafeAreaProvider> | ||
<NavigationContainer theme={SuperDarkTheme}> | ||
<BottomSheetModalProvider> | ||
<View style={styles.container}> | ||
<Story /> | ||
</View> | ||
</BottomSheetModalProvider> | ||
</NavigationContainer> | ||
</SafeAreaProvider> | ||
</GestureHandlerRootView> | ||
), | ||
], | ||
}; | ||
|
||
export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
/* do not change this file, it is auto generated by storybook. */ | ||
|
||
import { | ||
start, | ||
prepareStories, | ||
getProjectAnnotations, | ||
} from "@storybook/react-native"; | ||
|
||
import "@storybook/addon-ondevice-controls/register"; | ||
import "@storybook/addon-ondevice-actions/register"; | ||
|
||
const normalizedStories = [ | ||
{ | ||
titlePrefix: "", | ||
directory: "./src/components", | ||
files: "**/*.stories.?(ts|tsx|js|jsx)", | ||
importPathMatcher: | ||
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, | ||
// @ts-ignore | ||
req: require.context( | ||
"../src/components", | ||
true, | ||
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/ | ||
), | ||
}, | ||
]; | ||
|
||
declare global { | ||
var view: ReturnType<typeof start>; | ||
var STORIES: typeof normalizedStories; | ||
} | ||
|
||
const annotations = [ | ||
require("./preview"), | ||
require("@storybook/react-native/dist/preview"), | ||
require("@storybook/addon-actions/preview"), | ||
]; | ||
|
||
global.STORIES = normalizedStories; | ||
|
||
// @ts-ignore | ||
module?.hot?.accept?.(); | ||
|
||
if (!global.view) { | ||
global.view = start({ | ||
annotations, | ||
storyEntries: normalizedStories, | ||
}); | ||
} else { | ||
const { importMap } = prepareStories({ storyEntries: normalizedStories }); | ||
|
||
global.view._preview.onStoriesChanged({ | ||
importFn: async (importPath: string) => importMap[importPath], | ||
}); | ||
|
||
global.view._preview.onGetProjectAnnotationsChanged({ | ||
getProjectAnnotations: getProjectAnnotations(global.view, annotations), | ||
}); | ||
} | ||
|
||
export const view = global.view; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { Theme } from '@storybook/react-native'; | ||
import { SuperDarkTheme } from '../src/theme/themes'; | ||
|
||
type DeepPartial<T> = T extends object | ||
? { | ||
[P in keyof T]?: DeepPartial<T[P]>; | ||
} | ||
: T; | ||
|
||
export const krakenTheme: DeepPartial<Theme> = { | ||
backgroundColor: SuperDarkTheme.colors.background, | ||
preview: { | ||
containerBackgroundColor: SuperDarkTheme.colors.dark100, | ||
backgroundColor: SuperDarkTheme.colors.background, | ||
}, | ||
text: { | ||
primaryColor: SuperDarkTheme.colors.kraken, | ||
}, | ||
navigation: { | ||
backgroundColor: SuperDarkTheme.colors.background, | ||
borderColor: SuperDarkTheme.colors.kraken, | ||
visibilityBorderRadius: 10, | ||
}, | ||
tabs: { | ||
activeBorderColor: SuperDarkTheme.colors.kraken, | ||
activeBackgroundColor: SuperDarkTheme.colors.background, | ||
activeTextColor: SuperDarkTheme.colors.light100, | ||
}, | ||
panel: { | ||
backgroundColor: SuperDarkTheme.colors.background, | ||
borderColor: SuperDarkTheme.colors.kraken, | ||
}, | ||
storyList: { | ||
headerTextColor: SuperDarkTheme.colors.light100, | ||
storySelectedBackgroundColor: SuperDarkTheme.colors.purple_40, | ||
storySelectedTextColor: SuperDarkTheme.colors.lavenderIndigo, | ||
sectionActiveBackgroundColor: SuperDarkTheme.colors.purple_40, | ||
search: { | ||
textColor: SuperDarkTheme.colors.light100, | ||
placeholderTextColor: SuperDarkTheme.colors.light75, | ||
borderRadius: 10, | ||
borderColor: SuperDarkTheme.colors.kraken, | ||
backgroundColor: SuperDarkTheme.colors.background, | ||
}, | ||
}, | ||
inputs: { | ||
labelTextColor: SuperDarkTheme.colors.text, | ||
text: { | ||
textColor: SuperDarkTheme.colors.dark100, | ||
backgroundColor: SuperDarkTheme.colors.light75, | ||
}, | ||
}, | ||
}; |
Oops, something went wrong.