Skip to content

Commit

Permalink
Merge pull request #2455 from gluestack/release/progress-orientation
Browse files Browse the repository at this point in the history 
Release/progress orientation
  • Loading branch information
@gluestackadmin
gluestackadmin authored Sep 6, 2024
2 parents 2e36b39 + a5853b0 commit de8d495
Show file tree
Hide file tree
Showing 25 changed files with 1,117 additions and 120 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 @@ -70,6 +70,10 @@ module.exports = function (api) {
__dirname,
'../../packages/unstyled/link/src'
),
'@gluestack-ui/progress': path.resolve(
__dirname,
'../../packages/unstyled/progress/src'
),
'@gluestack-ui/accordion': path.resolve(
__dirname,
'../../packages/unstyled/accordion/src'
Expand Down
2 changes: 1 addition & 1 deletion example/storybook-nativewind/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"@gluestack-style/animation-resolver": "^1.0.4",
"@gluestack-style/react": "^1.0.57",
"@gluestack-ui/config": "^1.1.19",
"@gluestack-ui/themed": "^1.1.50",
"@gluestack-ui/themed": "^1.1.51",
"@gluestack/design-system": "^0.5.36",
"@gorhom/bottom-sheet": "^5.0.0-alpha.10",
"@legendapp/motion": "^2.2.0",
Expand Down
26 changes: 8 additions & 18 deletions example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@ export default () => (
</Accordion>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
Expand Down Expand Up @@ -479,12 +480,11 @@ We have outlined the various features that ensure the Accordion component is acc

- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed).


## Examples
### Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

### Customized Component
#### Customized Component

The following example demonstrates how easily you can customize the Accordion component to suit your needs.

Expand Down Expand Up @@ -627,7 +627,7 @@ Wrapper,

</AppProvider>

### Rounded corners
#### Rounded corners

The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.

Expand Down Expand Up @@ -723,7 +723,7 @@ function App(){
/>
</AppProvider>

### Disabled item
#### Disabled item

You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component.

Expand Down Expand Up @@ -821,7 +821,7 @@ function App(){
/>
</AppProvider>

### Default value
#### Default value

Use the defaultValue prop to define the open item by default.

Expand Down Expand Up @@ -943,7 +943,7 @@ function App(){
/>
</AppProvider>

### Nested Components
#### Nested Components

You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region.

Expand Down Expand Up @@ -1064,7 +1064,7 @@ function App(){
/>
</AppProvider>

### Controlled Accordion
#### Controlled Accordion

A component is controlled when it's managed by its parent using props.
You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion.
Expand Down Expand Up @@ -1189,13 +1189,3 @@ function App(){
}}
/>
</AppProvider>










90 changes: 90 additions & 0 deletions example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,96 @@ Button component is created using Pressable component from react-native. It exte

> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.

### Data Attributes Table

Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>State</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Data Attribute</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Values</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>hover</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
data-hover
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>active</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-active</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>disabled</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-disabled</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>focusVisible</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-focus-visible</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>


### Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
Expand Down
161 changes: 161 additions & 0 deletions example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,6 +365,48 @@ Contains all indicators related layout style props and actions. It inherits all

Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Prop</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Type</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Default</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Description</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>forceMount</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>boolean</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>false</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>Forces mounting when more control is needed, useful for animations with React libraries.</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>


#### CheckboxLabel

Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
Expand Down Expand Up @@ -550,6 +592,125 @@ Checkbox component is created using Pressable component from react-native. It ex

> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.

### Data Attributes Table

Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>State</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Data Attribute</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Values</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>hover</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
data-hover
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>active</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-active</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>disabled</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-disabled</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>focusVisible</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-focus-visible</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>invalid</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-invalid</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>checked</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-checked</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>

### Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
Expand Down
Loading

0 comments on commit de8d495

Please sign in to comment.