Skip to content

Commit 8471fc1

Browse files
iuricmpiuricmp
committed
chore: storybook
Signed-off-by: Iuri Pereira <[email protected]>
1 parent ffde2bb commit 8471fc1

File tree

12 files changed

+1418
-109
lines changed

12 files changed

+1418
-109
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ import { Button, DefaultTheme, Text, ThemeProvider } from '@berty/ui-components'
2828

2929
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
3030

31+
## Figma
32+
33+
[Figma for Gnokey Template](https://www.figma.com/design/ZvyQCGf8yJ53UxFNHuheDU/GKM-design-_-UI?node-id=44-959&t=27GIxzjOfQVEzfpi-0)
34+
3135
## License
3236

3337
MIT

‎example/.storybook/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import AsyncStorage from '@react-native-async-storage/async-storage'
2+
import { view } from './storybook.requires'
3+
4+
const StorybookUIRoot = view.getStorybookUI({
5+
storage: {
6+
getItem: AsyncStorage.getItem,
7+
setItem: AsyncStorage.setItem,
8+
},
9+
})
10+
11+
export default StorybookUIRoot

‎example/.storybook/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { StorybookConfig } from '@storybook/react-native'
2+
3+
const main: StorybookConfig = {
4+
stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
5+
addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
6+
}
7+
8+
export default main

‎example/.storybook/preview.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
import { DefaultTheme, ThemeProvider } from '@berty/ui-components'
3+
import type { Preview } from '@storybook/react'
4+
5+
const theme: DefaultTheme = {
6+
colors: {
7+
black: '#000000',
8+
},
9+
buttons: {
10+
primary: '#000000',
11+
secondary: '#E5E5E5',
12+
label: {
13+
primary: '#ffffff',
14+
secondary: '#000000',
15+
},
16+
},
17+
}
18+
19+
const preview: Preview = {
20+
parameters: {
21+
controls: {
22+
matchers: {
23+
color: /(background|color)$/i,
24+
date: /Date$/,
25+
},
26+
},
27+
},
28+
decorators: [
29+
Story => (
30+
<ThemeProvider theme={theme}>
31+
<Story />
32+
</ThemeProvider>
33+
),
34+
],
35+
}
36+
37+
export default preview

‎example/.storybook/stories/Button/Button.stories.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react'
2+
import { View } from 'react-native'
3+
import { Button } from '@berty/ui-components'
4+
import FontAwesome6 from '@expo/vector-icons/FontAwesome6'
5+
import type { Meta } from '@storybook/react'
6+
7+
const meta = {
8+
title: 'Components/Button',
9+
component: Button,
10+
argTypes: {
11+
onPress: { action: 'pressed the button' },
12+
color: {
13+
control: {
14+
type: 'text',
15+
options: ['primary', 'secondary'],
16+
defaultValue: 'primary',
17+
},
18+
},
19+
},
20+
args: {
21+
color: 'primary',
22+
children: 'Primary Button',
23+
},
24+
decorators: [
25+
Story => (
26+
<View style={{ padding: 16, alignItems: 'flex-start' }}>
27+
<Story />
28+
</View>
29+
),
30+
],
31+
} satisfies Meta<typeof Button>
32+
33+
export default meta
34+
35+
export const Basic = (args: any) => (
36+
<>
37+
<Button {...args} />
38+
<View style={{ height: 16 }} />
39+
<Button {...args} color='secondary' />
40+
<View style={{ height: 16 }} />
41+
<Button {...args} endIcon={<FontAwesome6 name='copy' size={20} color='white' />} />
42+
<View style={{ height: 16 }} />
43+
<Button {...args} startIcon={<FontAwesome6 name='copy' size={20} color='white' />} />
44+
<View style={{ height: 16 }} />
45+
<Button style={{ height: 80, width: 80, borderRadius: 40 }}>
46+
<FontAwesome6 name='copy' size={30} color='white' />
47+
</Button>
48+
<View style={{ height: 16 }} />
49+
<Button style={{ height: 80, width: 80, borderRadius: 40 }} color='secondary'>
50+
<FontAwesome6 name='copy' size={30} />
51+
</Button>
52+
</>
53+
)

‎example/.storybook/storybook.requires.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* do not change this file, it is auto generated by storybook. */
2+
import '@storybook/addon-ondevice-actions/register'
3+
import '@storybook/addon-ondevice-controls/register'
4+
import { start, updateView } from '@storybook/react-native'
5+
6+
const normalizedStories = [
7+
{
8+
titlePrefix: '',
9+
directory: './.storybook/stories',
10+
files: '**/*.stories.?(ts|tsx|js|jsx)',
11+
importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
12+
// @ts-ignore
13+
req: require.context('./stories', true, /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/),
14+
},
15+
]
16+
17+
declare global {
18+
var view: ReturnType<typeof start>
19+
var STORIES: typeof normalizedStories
20+
}
21+
22+
const annotations = [require('./preview'), require('@storybook/react-native/preview'), require('@storybook/addon-ondevice-actions/preview')]
23+
24+
global.STORIES = normalizedStories
25+
26+
// @ts-ignore
27+
module?.hot?.accept?.()
28+
29+
if (!global.view) {
30+
global.view = start({
31+
annotations,
32+
storyEntries: normalizedStories,
33+
})
34+
} else {
35+
updateView(global.view, annotations, normalizedStories)
36+
}
37+
38+
export const view = global.view

‎example/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Example Project (aka Storybook)
2+
3+
This is an example project that demonstrates how to use the components in this library.
4+
It is built using [Storyboo for React Native](https://github.com/storybookjs/react-native#getting-started).

‎example/metro.config.js‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
1+
// metro.config.js
12
const path = require('path')
2-
const { getDefaultConfig } = require('@expo/metro-config')
3-
const { getConfig } = require('react-native-builder-bob/metro-config')
3+
const { getDefaultConfig } = require('expo/metro-config')
4+
const withStorybook = require('@storybook/react-native/metro/withStorybook')
45
const pkg = require('../package.json')
6+
const { getConfig } = require('react-native-builder-bob/metro-config')
57

68
const root = path.resolve(__dirname, '..')
79

8-
/**
9-
* Metro configuration
10-
* https://facebook.github.io/metro/docs/configuration
11-
*
12-
* @type {import('metro-config').MetroConfig}
13-
*/
14-
module.exports = getConfig(getDefaultConfig(__dirname), {
10+
/** @type {import('expo/metro-config').MetroConfig} */
11+
const config = getConfig(getDefaultConfig(__dirname), {
1512
root,
1613
pkg,
1714
project: __dirname,
1815
})
16+
17+
module.exports = withStorybook(config, {
18+
// Set to false to remove storybook specific options
19+
// you can also use a env variable to set this
20+
enabled: true,
21+
// Path to your storybook config
22+
configPath: path.resolve(__dirname, './.storybook'),
23+
24+
// Optional websockets configuration
25+
// Starts a websocket server on the specified port and host on metro start
26+
// websockets: {
27+
// port: 7007,
28+
// host: 'localhost',
29+
// },
30+
})

‎example/package.json‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"start": "expo start",
77
"android": "expo start --android",
88
"ios": "expo start --ios",
9-
"web": "expo start --web"
9+
"web": "expo start --web",
10+
"storybook-generate": "sb-rn-get-stories"
1011
},
1112
"dependencies": {
1213
"@berty/ui-components": "workspace:*",
@@ -21,7 +22,19 @@
2122
},
2223
"devDependencies": {
2324
"@babel/core": "^7.20.0",
24-
"react-native-builder-bob": "^0.35.2"
25+
"@gorhom/bottom-sheet": "^5.0.6",
26+
"@react-native-async-storage/async-storage": "^2.1.0",
27+
"@react-native-community/datetimepicker": "^8.2.0",
28+
"@react-native-community/slider": "^4.5.5",
29+
"@storybook/addon-ondevice-actions": "^8.5.1",
30+
"@storybook/addon-ondevice-controls": "^8.5.1",
31+
"@storybook/react-native": "^8.5.1",
32+
"babel-loader": "^8.4.1",
33+
"react-native-builder-bob": "^0.35.2",
34+
"react-native-gesture-handler": "^2.22.1",
35+
"react-native-reanimated": "^3.16.7",
36+
"react-native-safe-area-context": "^5.1.0",
37+
"react-native-svg": "^15.11.1"
2538
},
2639
"private": true
2740
}

‎example/src/App.tsx‎

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1 @@
1-
import { StyleSheet, View } from 'react-native'
2-
import { Button, DefaultTheme, Text, ThemeProvider } from '@berty/ui-components'
3-
import FontAwesome6 from '@expo/vector-icons/FontAwesome6'
4-
import Ionicons from '@expo/vector-icons/Ionicons'
5-
6-
export default function App() {
7-
const theme: DefaultTheme = {
8-
colors: {
9-
black: '#000000',
10-
},
11-
buttons: {
12-
primary: '#000000',
13-
secondary: '#E5E5E5',
14-
label: {
15-
primary: '#ffffff',
16-
secondary: '#000000',
17-
},
18-
},
19-
}
20-
21-
return (
22-
<ThemeProvider theme={theme}>
23-
<View style={styles.container}>
24-
<View style={{ justifyContent: 'space-around' }}>
25-
<Text.H1>Create The</Text.H1>
26-
<Text.H1 style={{ color: 'red' }}>Master</Text.H1>
27-
<Text.H1 style={{ color: 'red' }}>Keyword</Text.H1>
28-
</View>
29-
<View style={{ height: 16 }} />
30-
<Button>Primary Button</Button>
31-
<View style={{ height: 16 }} />
32-
<Button startIcon={<Ionicons name='checkmark-circle' size={20} color='white' />}>Primary with start icon</Button>
33-
<View style={{ height: 16 }} />
34-
<Button color='secondary' endIcon={<FontAwesome6 name='copy' size={20} color='black' />}>
35-
Primary with start icon
36-
</Button>
37-
<View style={{ height: 16 }} />
38-
<Button color='primary' style={{ height: 80, width: 80, borderRadius: 40 }}>
39-
<FontAwesome6 name='copy' size={20} />
40-
</Button>
41-
<View style={{ height: 16 }} />
42-
{/* <View style={{ height: 16 }} />
43-
<Button.Icon aria-label="plus" >Button with icon</Button.Icon>
44-
<View style={{ height: 16 }} />
45-
<Button.Icon aria-label="minus" >Button with icon</Button.Icon>
46-
<View style={{ height: 16 }} />
47-
<Button.Icon aria-label="minus" >Secondary</Button.Icon>
48-
<View style={{ height: 16 }} />
49-
<Button.Icon aria-label="minus" ></Button.Icon> */}
50-
</View>
51-
</ThemeProvider>
52-
)
53-
}
54-
55-
const styles = StyleSheet.create({
56-
container: {
57-
flex: 1,
58-
alignItems: 'center',
59-
justifyContent: 'center',
60-
},
61-
})
1+
export { default } from '../.storybook'

0 commit comments

Comments
 (0)