Skip to content

Commit

Permalink
fix: image for storybook and added rsc table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Viraj-10
Viraj-10 committed Aug 16, 2024
1 parent 90d41ec commit 7da8421
Show file tree
Hide file tree
Showing 7 changed files with 280 additions and 10 deletions.
4 changes: 4 additions & 0 deletions example/storybook-nativewind/babel.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,10 @@ module.exports = function (api) {
__dirname,
'../../example/storybook-nativewind/tailwind.config.js'
),
'next/image': path.resolve(
__dirname,
'./src/extra-components/storybook-components/NextImageAlt'
),
},
},
],
Expand Down
43 changes: 41 additions & 2 deletions example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { transformedCode } from '../../utils';
import { AppProvider, CodePreview, Tabs } from '@gluestack/design-system';

import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
import { CollapsibleCode, Table, TableContainer, } from '@gluestack/design-system';

This is an illustration of **Box** component.

Expand Down Expand Up @@ -132,4 +132,43 @@ This section provides a comprehensive reference list for the component props, de

#### Box

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
<p>{`Renders a <div /> on web and a View on native.`}</p>

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Platform</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Output</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>{`Web`}</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<div />`}</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>Native</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<View />`}</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>
43 changes: 41 additions & 2 deletions example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { Center } from '../../core-components/nativewind';
import { Text } from '../../core-components/nativewind/text';

import { transformedCode } from '../../utils';
import { AppProvider, CodePreview, Table } from '@gluestack/design-system';
import { AppProvider, CodePreview, Table, TableContainer, } from '@gluestack/design-system';

import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode, Tabs } from '@gluestack/design-system';
Expand Down Expand Up @@ -130,4 +130,43 @@ This section provides a comprehensive reference list for the component props, de

#### Center

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
<p>{`Renders a <div /> on web and a View on native.`}</p>

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Platform</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Output</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>{`Web`}</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<div />`}</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>Native</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<View />`}</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>
86 changes: 84 additions & 2 deletions example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,48 @@ This section provides a comprehensive reference list for the component props, de

### Grid

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component on native and html div tag on web.
<p>{`Renders a <div /> on web and a View on native.`}</p>

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Platform</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Output</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>{`Web`}</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<div />`}</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>Native</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<View />`}</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>

#### props

<>
<TableContainer>
Expand Down Expand Up @@ -223,7 +264,48 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/

### GridItem

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component on native and html div tag on web.
<p>{`Renders a <div /> on web and a View on native.`}</p>

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Platform</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Output</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>{`Web`}</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<div />`}</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>Native</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<View />`}</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>

#### props

<>
<TableContainer>
Expand Down
41 changes: 40 additions & 1 deletion example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,46 @@ This section provides a comprehensive reference list for the component props, de

#### HStack

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
<p>{`Renders a <div /> on web and a View on native.`}</p>

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Platform</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Output</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>{`Web`}</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<div />`}</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>Native</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<View />`}</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>

### Accessibility

Expand Down
43 changes: 40 additions & 3 deletions example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,46 @@ This section provides a comprehensive reference list for the component props, de

#### VStack

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
<p>{`Renders a <div /> on web and a View on native.`}</p>

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Platform</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Output</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>{`Web`}</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<div />`}</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>Native</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`<View />`}</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>

### Accessibility

Expand All @@ -157,8 +196,6 @@ In essence, the VStack acts as a container that inherits and propagates the acce

### Props

VStack component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.

#### VStack

<>
Expand Down
30 changes: 30 additions & 0 deletions example/storybook-nativewind/src/extra-components/storybook-components/NextImageAlt.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { cssInterop } from 'nativewind';
import React from 'react';
import { Image } from 'react-native';
cssInterop(Image, { className: 'style' });
export default function NextImageAlt({
src,
alt,
className,
}: {
src: string;
alt: string;
className: string;
props?: any;
}) {
return (
<Image
source={{
uri: src,
}}
alt={alt}
resizeMode="contain"
className={className}
style={{
width: '100%',
height: 'auto',
aspectRatio: 1,
}}
/>
);
}

0 comments on commit 7da8421

Please sign in to comment.