Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added switch component with examples natiivewind #1916

Merged
merged 1 commit into from
Mar 11, 2024
Merged

feat: added switch component with examples natiivewind #1916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions example/storybook-nativewind/src/components/Switch/Switch.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,17 @@ const SwitchMeta: ComponentMeta<typeof Switch> = {
control: 'boolean',
options: [true, false],
},
defaultValue: {
control: 'boolean',
options: [true, false],
},
},
args: {
size: 'md',
isDisabled: false,
isEnabled: false,
isInvalid: false,
defaultValue: false,
},
};

Expand Down
15 changes: 12 additions & 3 deletions example/storybook-nativewind/src/components/Switch/Switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
import React from 'react';
import { VStack, Text, HStack } from '@gluestack-ui/themed';
import { Switch } from '@/components/ui/switch';
import colors from 'tailwindcss/colors';

const SwitchBasic = ({ ...props }: any) => {
return <Switch defaultValue={true} value={props.isEnabled} {...props} />;
return (
<Switch
// value={props.isEnabled}
trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
thumbColor={colors.gray[50]}
activeThumbColor={colors.gray[50]}
ios_backgroundColor={colors.gray[300]}
{...props}
/>
);
};

SwitchBasic.description =
'This is a basic Switch component example. Switches are used to toggle between two states.';

export default SwitchBasic;

export { Switch, VStack, Text, HStack };
export { Switch };
145 changes: 110 additions & 35 deletions example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,8 @@ import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/components/Forms/Switch" />

import { Switch } from '../../core-components/nativewind';
import { VStack, Text } from '../../core-components/nativewind';
import { HStack } from '../../core-components/nativewind';
import colors from 'tailwindcss/colors';
import { HStack, Switch, VStack, Text } from '../../core-components/nativewind';
import { transformedCode } from '../../utils';
import {
AppProvider,
Expand All @@ -39,12 +38,15 @@ This is an illustration of **Switch** component.
showArgsController={true}
metaData={{
code: `
<Switch {...props} />
<Switch {...props} trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
thumbColor={colors.gray[50]}
activeThumbColor={colors.gray[50]}
ios_backgroundColor={colors.gray[300]} />
`,
transformCode: (code) => {
return transformedCode(code);
},
scope: { Wrapper, Switch },
scope: { Wrapper, Switch, colors },
argsType: {
size: {
control: 'select',
Expand Down Expand Up @@ -258,43 +260,116 @@ We have outlined the various features that ensure the Button component is access

Switch component is created using Switch component from react-native. It extends all the props supported by [React Native Switch](https://reactnative.dev/docs/switch#props).

<!--
## Spec Doc
#### Switch

Explore the comprehensive details of the Switch in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
<AppProvider>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Name</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Value</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Default</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>size</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>sm | md | lg</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>md</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</AppProvider>

<iframe
style={{
borderRadius: '8px',
border: ' 1px solid rgba(0, 0, 0, 0.1)',
aspectRatio: 736 / 585,
}}
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5970%253A30699%26type%3Ddesign%26node-id%3D5970-32506%26viewport%3D659%252C250%252C0.03%26t%3DYxQQpkFNh6esETpC-1%26scaling%3Dcontain%26starting-point-node-id%3D5970%253A32506%26mode%3Ddesign"
allowFullScreen
/> -->
> 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.

<!--
### Customizing the Switch
### Examples

We have a function called `createSwitch` which can be used to create a custom switch component. This function takes in a configuration object which contains the styled components that you want to use for the switch. You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.
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.

#### Usage
#### Switch With Label

Default styling of all these components can be found in the `components/core/switch` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Switch) of the styled `Switch` components.
An example of a switch component with a label, which includes another switch component for toggling additional options.

```jsx
// import the styles
import { Root } from 'components/core/switch/styled-components';
<AppProvider>
<CodePreview
showComponentRenderer={true}
showArgsController={false}
metaData={{
code: `
<HStack space="md">
<Switch
trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
thumbColor={colors.gray[50]}
activeThumbColor={colors.gray[50]}
ios_backgroundColor={colors.gray[300]}
/>
<Text size="sm" >Allow notifications</Text>
</HStack>
`,
transformCode: (code) => {
return transformedCode(code);
},
scope: {
Wrapper,
Switch,
Text,
HStack,
colors
},
argsType: {},
}}
/>
</AppProvider>

// import the createSwitch function
import { createSwitch } from '@gluestack-ui/switch';
#### Checked State

// Understanding the API
const Switch = createSwitch({
Root,
});
An example of a switch component used within a checked state component to represent a pre-selected or activated option.

// Using the switch component
export default () => <Switch />;
```
-->
<AppProvider>
<CodePreview
showComponentRenderer={true}
showArgsController={false}
metaData={{
code: `
<HStack space="md">
<Switch
defaultValue={true}
trackColor={{ false: colors.gray[300], true: colors.gray[500] }}
thumbColor={colors.gray[50]}
activeThumbColor={colors.gray[50]}
ios_backgroundColor={colors.gray[300]}
/>
<Text size="sm" >Public profile</Text>
</HStack>
`,
transformCode: (code) => {
return transformedCode(code);
},
scope: {
Wrapper,
Switch,
Text,
HStack,
colors,
},
argsType: {},
}}
/>
</AppProvider>
Loading
Loading