-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add text component * feat: add flex component * feat: export text and flex component * chore: deprecate old flex and text component * doc: update text component docs * docs: add docs for flex component
- Loading branch information
Showing
12 changed files
with
510 additions
and
23 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 |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| --- | ||
| title: Flex | ||
| description: | ||
| --- | ||
|
|
||
| ## Preview | ||
|
|
||
| <Preview> | ||
| <Flex gap="large"> | ||
| <Flex gap="small" direction="column"> | ||
| <Button variant="primary">Primary button</Button> | ||
| <Button variant="primary">Primary button</Button> | ||
| <Button variant="primary">Primary button</Button> | ||
| </Flex> | ||
| <Flex gap="small" direction="column"> | ||
| <Button variant="primary">Primary button</Button> | ||
| <Button variant="primary">Primary button</Button> | ||
| <Button variant="primary">Primary button</Button> | ||
| </Flex> | ||
| </Flex> | ||
| </Preview> | ||
|
|
||
| ## Installation | ||
|
|
||
| Install the component from your command line. | ||
|
|
||
| <LiveProvider> | ||
| <LiveEditor code={`npm install @raystack/apsara`} border /> | ||
| </LiveProvider> | ||
|
|
||
| ## Props | ||
|
|
||
| The `Flex` component accepts the following props: | ||
|
|
||
| - `gap`: sets the gutter space between row and columns | ||
| - `wrap`: sets whether flex items are forced onto one line or can wrap onto multiple lines. | ||
| - `justify`: defines how the browser distributes space between and around content items along the main axis of a flex container. | ||
| - `align`: it controls the alignment of items on the cross axis. | ||
| - `direction`: sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). | ||
| - `className`: Custom CSS class names | ||
|
|
||
| ## Anatomy | ||
|
|
||
| Import all parts and piece them together. | ||
|
|
||
| <LiveProvider> | ||
| <LiveEditor code={` | ||
| import { Flex } from '@raystack/apsara/v1' | ||
| <Flex direction="column" justify="center"> | ||
| <Flex direction="row" gap="medium"></Flex> | ||
| <Flex direction="row" align="center"></Flex> | ||
| </Flex> | ||
| `} border /> | ||
|
|
||
| </LiveProvider> |
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
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
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
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
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,88 @@ | ||
| .flex { | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| } | ||
|
|
||
| .direction-row { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .direction-column { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .direction-rowReverse { | ||
| flex-direction: row-reverse; | ||
| } | ||
|
|
||
| .direction-columnReverse { | ||
| flex-direction: column-reverse; | ||
| } | ||
|
|
||
| .align-start { | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| .align-center { | ||
| align-items: center; | ||
| } | ||
|
|
||
| .align-end { | ||
| align-items: flex-end; | ||
| } | ||
|
|
||
| .align-stretch { | ||
| align-items: stretch; | ||
| } | ||
|
|
||
| .align-baseline { | ||
| align-items: baseline; | ||
| } | ||
|
|
||
| .justify-start { | ||
| justify-content: flex-start; | ||
| } | ||
|
|
||
| .justify-center { | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .justify-end { | ||
| justify-content: end; | ||
| } | ||
|
|
||
| .justify-between { | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .wrap-noWrap { | ||
| flex-wrap: nowrap; | ||
| } | ||
|
|
||
| .wrap-wrap { | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| .wrap-wrapReverse { | ||
| flex-wrap: wrap-reverse; | ||
| } | ||
|
|
||
| .gap-xs { | ||
| gap: var(--rs-space-2); | ||
| } | ||
|
|
||
| .gap-sm { | ||
| gap: var(--rs-space-3); | ||
| } | ||
|
|
||
| .gap-md { | ||
| gap: var(--rs-space-5); | ||
| } | ||
|
|
||
| .gap-lg { | ||
| gap: var(--rs-space-9); | ||
| } | ||
|
|
||
| .gap-xl { | ||
| gap: var(--rs-space-11); | ||
| } |
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,65 @@ | ||
| import { cva, VariantProps } from "class-variance-authority"; | ||
| import { forwardRef, HTMLAttributes, PropsWithChildren } from "react"; | ||
| import styles from "./flex.module.css"; | ||
|
|
||
| const flex = cva(styles.flex, { | ||
| variants: { | ||
| direction: { | ||
| row: styles["direction-row"], | ||
| column: styles["direction-column"], | ||
| rowReverse: styles["direction-rowReverse"], | ||
| columnReverse: styles["direction-columnReverse"], | ||
| }, | ||
| align: { | ||
| start: styles["align-start"], | ||
| center: styles["align-center"], | ||
| end: styles["align-end"], | ||
| stretch: styles["align-stretch"], | ||
| baseline: styles["align-baseline"], | ||
| }, | ||
| justify: { | ||
| start: styles["justify-start"], | ||
| center: styles["justify-center"], | ||
| end: styles["justify-end"], | ||
| between: styles["justify-between"], | ||
| }, | ||
| wrap: { | ||
| noWrap: styles["wrap-noWrap"], | ||
| wrap: styles["wrap-wrap"], | ||
| wrapReverse: styles["wrap-wrapReverse"], | ||
| }, | ||
| gap: { | ||
| "extra-small": styles["gap-xs"], | ||
| small: styles["gap-sm"], | ||
| medium: styles["gap-md"], | ||
| large: styles["gap-lg"], | ||
| "extra-large": styles["gap-xl"], | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| direction: "row", | ||
| align: "stretch", | ||
| justify: "start", | ||
| wrap: "noWrap", | ||
| }, | ||
| }); | ||
|
|
||
| type BoxProps = PropsWithChildren<VariantProps<typeof flex>> & | ||
| HTMLAttributes<HTMLDivElement>; | ||
|
|
||
| export const Flex = forwardRef<HTMLDivElement, BoxProps>( | ||
| ( | ||
| { children, direction, align, justify, wrap, gap, className, ...props }, | ||
| ref | ||
| ) => { | ||
| return ( | ||
| <div | ||
| className={flex({ direction, align, justify, wrap, gap, className })} | ||
| {...props} | ||
| ref={ref} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| ); |
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 @@ | ||
| export { Flex } from "./flex"; |
Oops, something went wrong.