diff --git a/.babelrc.json b/.babelrc.json new file mode 100644 index 0000000..491b750 --- /dev/null +++ b/.babelrc.json @@ -0,0 +1,9 @@ +{ + "presets": [ + "@babel/preset-react", + "@babel/preset-typescript" + ], + "plugins": [ + "babel-plugin-react-docgen" + ] +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..37cefff --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "singleQuote": true +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..4cda6d1 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021
RIOTS + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 3034610..129dda5 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,96 @@ -# react-aria-design-system -React-Aria +[![backlight.dev](https://img.shields.io/badge/Open%20in-Backlight.dev%20editor-%23f8c307)](https://backlight.dev/preview/TIVJpWNAZ0hSftKJ8gjY) +[![Github Repo](https://img.shields.io/github/last-commit/divriots/starter-react-aria)](https://github.com/divriots/starter-react-aria) + +# React Aria Tech Sample
_by_ ‹div›RIOTS + +This is a _Technology Sample_ you can rely on to build your own Design System, based on React and [React Aria](https://react-spectrum.adobe.com/react-aria/). + +**Disclaimer**: _Technology Samples_ aren't comprehensive _Design Systems_ but showcases a given technology so you free to build you own solution upon it. + +## Architecture + +This _tech sample_ uses [React](https://reactjs.org/) and [JSX](https://reactjs.org/docs/introducing-jsx.html) to implement its components with [TypeScript](https://www.typescriptlang.org/). It relies on [React Aria](https://react-spectrum.adobe.com/react-aria/), which is a part of the _Adobe Spectrum Design System_. React Aria provides a collection of _React Hooks_ to handle the accessibility and navigation behaviors, allowing you to set a proper interaction layer for all of your components. + +> React Aria ensures consistent behavior, no matter the UI. + +> React Aria provides accessibility and behavior according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support. + +Because of the agnostic nature of React Aria, the Design Tokens for styling are declared in [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). + +The components then use [Scss](https://sass-lang.com/) for their internal styles, relying on CSS Custom Properties for Tokens access. + +### Tokens + +The Tokens are split in different components: + +- `typography`: fonts definitions +- `colors`: colors and variants +- `spacing`: relative and absolute spaces +- `elevation`: shadows effects +- `border-radius` +- `transitions`: easing and speed +- `z-index`: z-axe indices + +All tokens are declared in dedicated `_*.scss` files in their dedicated tokens' components. They declare CSS Custom Properties, prefixed with `--aria-*`. They're then all exposed by the `all/all.scss` component global stylesheet. + +Your theme tokens are accessible by importing the theme stylesheet: + +```ts +import '~/all/src/all.scss'; +``` + +## Components + +Components can access the Tokens anywhere in their stylesheets as they're exposed at top CSS level `:root`. + +When styled with SCSS, components can use the [Sass `var` method](https://sass-lang.com/documentation/breaking-changes/css-vars) to read the Tokens values. + +```scss +.button { + border-radius: var(--aria-border-radius-medium); + background: var(--aria-color-primary); + color: var(--aria-color-white); +} +``` + +Then the styles are imported in the component using a CSS in React module interpolation: + +```ts +import styles from './button.module.scss'; + +export const Button => ( + +) +``` + +## Stories + +Stories are written in Storybook's [Component Story Format](https://backlight.dev/docs/component-story-format). + +The theme stylesheet containing the Tokens is injected in all stories files, thanks to the `story-layout` component: + +```jsx +import '~/story-layout'; +import React from 'react'; +import { Button } from '../index'; + +export const primary = () => ; +``` + +Stories for the components are located in their `stories/` folder. + +## Documentation + +Documentation pages are decorated by a React layout using the [@divriots/dockit-react](https://github.com/divriots/dockit-react) helpers. See the `mdx-layout` component. + +### Pages + +Each component embed its own documentation in its `doc/` folder. You can use any web format for your documentation but we recommend you to write it with the [mdx](https://backlight.dev/docs/mdx) format, allowing you to embed your components live in the documentation. + +--- + +## Links + +- [React Aria](https://react-spectrum.adobe.com/react-aria/) diff --git a/all/src/all.scss b/all/src/all.scss new file mode 100644 index 0000000..bbd83d9 --- /dev/null +++ b/all/src/all.scss @@ -0,0 +1,7 @@ +@import '../../colors/src/colors'; +@import '../../typography/src/typography'; +@import '../../spacing/src/spacing'; +@import '../../elevation/src/elevation'; +@import '../../border-radius/src/border-radius'; +@import '../../transition/src/transition'; +@import '../../z-index/src/z-index'; diff --git a/border-radius/doc/border-radius.mdx b/border-radius/doc/border-radius.mdx new file mode 100644 index 0000000..ae4afd8 --- /dev/null +++ b/border-radius/doc/border-radius.mdx @@ -0,0 +1,13 @@ +import { mdx } from '@mdx-js/react'; +import { StyleShowcases } from '@divriots/dockit-react/style-showcases'; +import './showcasing.css'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +## Border Radius + + diff --git a/border-radius/doc/showcasing.css b/border-radius/doc/showcasing.css new file mode 100644 index 0000000..8c095af --- /dev/null +++ b/border-radius/doc/showcasing.css @@ -0,0 +1,6 @@ +.box { + width: 8rem; + height: 6rem; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + background-color: #2f855a; +} diff --git a/border-radius/src/_border-radius.scss b/border-radius/src/_border-radius.scss new file mode 100644 index 0000000..d75123f --- /dev/null +++ b/border-radius/src/_border-radius.scss @@ -0,0 +1,8 @@ +:root { + --aria-border-radius-small: 0.125rem; + --aria-border-radius-medium: 0.25rem; + --aria-border-radius-large: 0.5rem; + --aria-border-radius-x-large: 1rem; + --aria-border-radius-circle: 50%; + --aria-border-radius-pill: 9999px; +} diff --git a/button/doc/button.mdx b/button/doc/button.mdx new file mode 100644 index 0000000..d57ad5c --- /dev/null +++ b/button/doc/button.mdx @@ -0,0 +1,43 @@ +import { mdx } from '@mdx-js/react'; +import { Button } from '../index'; +import { Props, Description } from '@divriots/dockit-react/props'; +import { Playground } from '@divriots/dockit-react/playground'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +# Button + + + +## Usage + +```tsx +import { Button } from '@divriots/starter-react-aria/button'; + +; +``` + +## Example + + alert('small button pressed!')}>Small + + +
+ + + + +`} /> + +## Props + + diff --git a/button/index.ts b/button/index.ts new file mode 100644 index 0000000..cced8ac --- /dev/null +++ b/button/index.ts @@ -0,0 +1 @@ +export * from './src/button'; diff --git a/button/src/button.module.scss b/button/src/button.module.scss new file mode 100644 index 0000000..59d8fa9 --- /dev/null +++ b/button/src/button.module.scss @@ -0,0 +1,69 @@ +.button { + display: inline-flex; + appearance: none; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + transition: all 250ms ease 0s; + user-select: none; + position: relative; + white-space: nowrap; + vertical-align: middle; + outline: transparent solid 2px; + outline-offset: 2px; + width: auto; + line-height: 1.2; + border-width: 0px; + border-radius: var(--aria-border-radius-medium); + font-weight: var(--aria-font-weight-semibold); + min-width: var(--aria-spacing-xx-large); + padding-inline-start: var(--aria-spacing-medium); + padding-inline-end: var(--aria-spacing-medium); + margin: 2px; + background-color: var(--aria-color-primary); + color: var(--aria-color-secondary); + cursor: pointer; +} + +.button:hover { + background-color: var(--aria-color-primary); + opacity: 0.9; +} + +.secondary { + background-color: var(--aria-color-secondary); + color: var(--aria-color-primary); +} + +.secondary:hover { + background-color: var(--aria-color-gray-300); +} + +.disabled { + cursor: not-allowed; + opacity: 0.8; +} + +.disabled:hover { + opacity: 0.8; +} + +.disabled:hover { + background-color: var(--aria-color-primary); +} + +.small { + font-size: var(--aria-font-size-small); + height: var(--aria-spacing-x-large); +} + +.medium { + font-size: var(--aria-font-size-medium); + height: var(--aria-spacing-xx-large); +} + +.large { + font-size: var(--aria-font-size-large); + height: var(--aria-spacing-xxx-large); +} diff --git a/button/src/button.tsx b/button/src/button.tsx new file mode 100644 index 0000000..fcab13d --- /dev/null +++ b/button/src/button.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +const { useRef } = React; +import type { ElementType, HTMLAttributes } from 'react'; +import type { AriaButtonProps } from '@react-types/button'; +import { useButton } from '@react-aria/button'; +import styles from './button.module.scss'; + +export type ButtonProps = AriaButtonProps & { + /** + Use the size prop to change the size of the button. You can set the value to 'small', 'medium' or 'large'. + */ + size?: 'small' | 'medium' | 'large'; + /** + Boolean flag indicating if should render as 'primary' variation. + */ + primary?: boolean; + /** + Boolean flag indicating if should render as 'secondary' variation. + */ + secondary?: boolean; +}; + +/** + The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. +*/ +export const Button = ({ + size = 'medium', + primary = true, + secondary = false, + ...rest +}: ButtonProps) => { + const ref = useRef(); + const { buttonProps } = useButton(rest, ref); + const { children } = rest; + + return ( + + ); +}; diff --git a/button/stories/index.stories.tsx b/button/stories/index.stories.tsx new file mode 100644 index 0000000..9e6b061 --- /dev/null +++ b/button/stories/index.stories.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { Button } from '../index'; + +export const primary = () => ( + <> + + + + +); + +export const secondary = () => ( + <> + + + + +); + +export const disabled = () => ( + <> + + + + +); diff --git a/colors/doc/colors.mdx b/colors/doc/colors.mdx new file mode 100644 index 0000000..ae17a0f --- /dev/null +++ b/colors/doc/colors.mdx @@ -0,0 +1,13 @@ +import { mdx } from '@mdx-js/react'; +import { StyleShowcases } from '@divriots/dockit-react/style-showcases'; +import './showcasing.css'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +## Colors + + diff --git a/colors/doc/showcasing.css b/colors/doc/showcasing.css new file mode 100644 index 0000000..e3e9fa7 --- /dev/null +++ b/colors/doc/showcasing.css @@ -0,0 +1,6 @@ +.box { + width: 6rem; + height: 6rem; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + border-radius: 0.2rem; +} diff --git a/colors/src/_colors.scss b/colors/src/_colors.scss new file mode 100644 index 0000000..f188764 --- /dev/null +++ b/colors/src/_colors.scss @@ -0,0 +1,7 @@ +:root { + --aria-color-white: #ffffff; + --aria-color-primary: #3082ce; + --aria-color-secondary: #f9f9f9; + --aria-color-gray-300: #cbd5e0; + --aria-color-focus-outline: #4299e14c; +} diff --git a/elevation/doc/elevation.mdx b/elevation/doc/elevation.mdx new file mode 100644 index 0000000..1720ab1 --- /dev/null +++ b/elevation/doc/elevation.mdx @@ -0,0 +1,13 @@ +import { mdx } from '@mdx-js/react'; +import { StyleShowcases } from '@divriots/dockit-react/style-showcases'; +import './showcasing.css'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +## Elevation + + diff --git a/elevation/doc/showcasing.css b/elevation/doc/showcasing.css new file mode 100644 index 0000000..fe56d2f --- /dev/null +++ b/elevation/doc/showcasing.css @@ -0,0 +1,6 @@ +.box { + width: 6rem; + height: 6rem; + background-color: #fff; + border-radius: 0.2rem; +} diff --git a/elevation/src/_elevation.scss b/elevation/src/_elevation.scss new file mode 100644 index 0000000..691d19f --- /dev/null +++ b/elevation/src/_elevation.scss @@ -0,0 +1,10 @@ +@import '../../colors/src/colors'; + +:root { + --aria-shadow-x-small: 0 1px 0 #0d131e0d; + --aria-shadow-small: 0 1px 2px #0d131e1a; + --aria-shadow-medium: 0 2px 4px #0d131e1a; + --aria-shadow-large: 0 2px 8px #0d131e1a; + --aria-shadow-x-large: 0 4px 16px #0d131e1a; + --aria-shadow-outline: 0 0 0 3px var(--aria-color-focus-outline); +} diff --git a/introduction/doc/index.mdx b/introduction/doc/index.mdx new file mode 100644 index 0000000..98b7ba2 --- /dev/null +++ b/introduction/doc/index.mdx @@ -0,0 +1,97 @@ +import { mdx } from '@mdx-js/react'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +# React Aria Tech Sample
_by_ ‹div›RIOTS + +This is a _Technology Sample_ you can rely on to build your own Design System, based on React and [React Aria](https://react-spectrum.adobe.com/react-aria/). + +**Disclaimer**: _Technology Samples_ aren't comprehensive _Design Systems_ but showcases a given technology so you free to build you own solution upon it. + +## Architecture + +This _tech sample_ uses [React](https://reactjs.org/) and [JSX](https://reactjs.org/docs/introducing-jsx.html) to implement its components with [TypeScript](https://www.typescriptlang.org/). It relies on [React Aria](https://react-spectrum.adobe.com/react-aria/), which is a part of the _Adobe Spectrum Design System_. React Aria provides a collection of _React Hooks_ to handle the accessibility and navigation behaviors, allowing you to set a proper interaction layer for all of your components. + +> React Aria ensures consistent behavior, no matter the UI. + +> React Aria provides accessibility and behavior according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support. + +Because of the agnostic nature of React Aria, the Design Tokens for styling are declared in [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). + +The components then use [Scss](https://sass-lang.com/) for their internal styles, relying on CSS Custom Properties for Tokens access. + +### Tokens + +The Tokens are split in different components: + +- `typography`: fonts definitions +- `colors`: colors and variants +- `spacing`: relative and absolute spaces +- `elevation`: shadows effects +- `border-radius` +- `transitions`: easing and speed +- `z-index`: z-axe indices + +All tokens are declared in dedicated `_*.scss` files in their dedicated tokens' components. They declare CSS Custom Properties, prefixed with `--aria-*`. They're then all exposed by the `all/all.scss` component global stylesheet. + +Your theme tokens are accessible by importing the theme stylesheet: + +```ts +import '~/all/src/all.scss'; +``` + +## Components + +Components can access the Tokens anywhere in their stylesheets as they're exposed at top CSS level `:root`. + +When styled with SCSS, components can use the [Sass `var` method](https://sass-lang.com/documentation/breaking-changes/css-vars) to read the Tokens values. + +```scss +.button { + border-radius: var(--aria-border-radius-medium); + background: var(--aria-color-primary); + color: var(--aria-color-white); +} +``` + +Then the styles are imported in the component using a CSS in React module interpolation: + +```ts +import styles from './button.module.scss'; + +export const Button => ( + +) +``` + +## Stories + +Stories are written in Storybook's [Component Story Format](https://backlight.dev/docs/component-story-format). + +The theme stylesheet containing the Tokens is injected in all stories files, thanks to the `story-layout` component: + +```jsx +import '~/story-layout'; +import React from 'react'; +import { Button } from '../index'; + +export const primary = () => ; +``` + +Stories for the components are located in their `stories/` folder. + +## Documentation + +Documentation pages are decorated by a React layout using the [@divriots/dockit-react](https://github.com/divriots/dockit-react) helpers. See the `mdx-layout` component. + +### Pages + +Each component embed its own documentation in its `doc/` folder. You can use any web format for your documentation but we recommend you to write it with the [mdx](https://backlight.dev/docs/mdx) format, allowing you to embed your components live in the documentation. + +--- + +## Links + +- [React Aria](https://react-spectrum.adobe.com/react-aria/) diff --git a/mdx-layout/index.js b/mdx-layout/index.js new file mode 100644 index 0000000..367ae77 --- /dev/null +++ b/mdx-layout/index.js @@ -0,0 +1 @@ +export * from './src/mdx-layout'; diff --git a/mdx-layout/src/layout.module.css b/mdx-layout/src/layout.module.css new file mode 100644 index 0000000..384f58f --- /dev/null +++ b/mdx-layout/src/layout.module.css @@ -0,0 +1,10 @@ +.logo { + width: 3rem; + height: 3rem; +} + +.heading { + margin: auto; + flex: 1; + padding: 0 1rem; +} diff --git a/mdx-layout/src/mdx-layout.tsx b/mdx-layout/src/mdx-layout.tsx new file mode 100644 index 0000000..88a58f2 --- /dev/null +++ b/mdx-layout/src/mdx-layout.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { MDXProvider } from '@mdx-js/react'; +import { CssLayout } from '@divriots/dockit-react/mdx-layout-css'; +import styles from './layout.module.css'; + +import '~/all/src/all.scss'; + +export const Layout = (props) => ( + + + +

+ React Aria +

+ + } + {...props} + /> + +); diff --git a/package.json b/package.json new file mode 100644 index 0000000..ef0182a --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "@backlight-dev/taboo-picture-edwfy.react-aria-li7earyw", + "version": "1.0.1", + "description": "", + "license": "MIT", + "type": "module", + "scripts": { + "serve": "npx backlight@latest serve BYSg7TzDBdkKAUTCKYXi --open" + }, + "devDependencies": { + "@divriots/dockit-react": "^0.0.85", + "@mdx-js/react": "^1.6.22" + }, + "dependencies": { + "@react-aria/button": "^3.3.4", + "@react-aria/focus": "^3.5.0", + "@react-aria/switch": "^3.1.3", + "@react-aria/visually-hidden": "^3.2.3", + "@react-stately/toggle": "^3.2.3", + "react": "^17.0.2", + "react-dom": "^17.0.2" + } +} \ No newline at end of file diff --git a/spacing/doc/spacing.mdx b/spacing/doc/spacing.mdx new file mode 100644 index 0000000..0a874b5 --- /dev/null +++ b/spacing/doc/spacing.mdx @@ -0,0 +1,8 @@ +import { mdx } from '@mdx-js/react'; +import { StyleShowcases } from '@divriots/dockit-react/style-showcases'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +## Spacing + +; diff --git a/spacing/src/_spacing.scss b/spacing/src/_spacing.scss new file mode 100644 index 0000000..b9c2c96 --- /dev/null +++ b/spacing/src/_spacing.scss @@ -0,0 +1,12 @@ +:root { + --aria-spacing-xxx-small: 0.125rem; + --aria-spacing-xx-small: 0.25rem; + --aria-spacing-x-small: 0.5rem; + --aria-spacing-small: 0.75rem; + --aria-spacing-medium: 1rem; + --aria-spacing-large: 1.25rem; + --aria-spacing-x-large: 1.75rem; + --aria-spacing-xx-large: 2.25rem; + --aria-spacing-xxx-large: 3rem; + --aria-spacing-xxxx-large: 4.5rem; +} diff --git a/stories.preview.js b/stories.preview.js new file mode 100644 index 0000000..82763f7 --- /dev/null +++ b/stories.preview.js @@ -0,0 +1,5 @@ +import '~/all/src/all.scss'; + +export const parameters = { + layout: 'centered', +}; diff --git a/studio.config.json b/studio.config.json new file mode 100644 index 0000000..2c9cbfe --- /dev/null +++ b/studio.config.json @@ -0,0 +1,37 @@ +{ + "packages": { + "dir": "", + "menu": [ + "introduction", + [ + "tokens", + [ + "typography", + "colors", + "spacing", + "elevation", + "border-radius", + "transition", + "z-index", + "all" + ] + ], + [ + "components", + [ + "button", + "switch", + "select" + ] + ], + [ + "dockit", + [ + "mdx-layout", + "story-layout", + "story-layout" + ] + ] + ] + } +} \ No newline at end of file diff --git a/switch/doc/switch.mdx b/switch/doc/switch.mdx new file mode 100644 index 0000000..f2e0982 --- /dev/null +++ b/switch/doc/switch.mdx @@ -0,0 +1,38 @@ +import { mdx } from '@mdx-js/react'; +import { Switch } from '../index'; +import { Props, Description } from '@divriots/dockit-react/props'; +import { Playground } from '@divriots/dockit-react/playground'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +# Switch + + + +## Usage + +```tsx +import { Switch } from '@divriots/starter-react-aria/switch'; + +Test; +``` + +## Example + +Small +Medium +Large +
+Small +Medium +Large + +`} +/> + +## Props + + diff --git a/switch/index.ts b/switch/index.ts new file mode 100644 index 0000000..9a57b58 --- /dev/null +++ b/switch/index.ts @@ -0,0 +1 @@ +export * from './src/switch'; diff --git a/switch/src/switch.module.scss b/switch/src/switch.module.scss new file mode 100644 index 0000000..8aa712d --- /dev/null +++ b/switch/src/switch.module.scss @@ -0,0 +1,77 @@ +.switch { + display: inline-flex; + flex-shrink: 0; + -webkit-box-pack: start; + justify-content: flex-start; + box-sizing: content-box; + cursor: pointer; + border-radius: var(--aria-border-radius-pill); + padding: 2px; + margin: 0 4px; + transition: all var(--aria-transition-fast) ease 0s; + background: var(--aria-color-gray-300); +} + +.small { + width: var(--aria-spacing-xx-large); + height: var(--aria-spacing-medium); +} + +.medium { + width: var(--aria-spacing-xxx-large); + height: var(--aria-spacing-large); +} + +.large { + width: var(--aria-spacing-xxxx-large); + height: var(--aria-spacing-x-large); +} + +.switch[data-checked] { + background: var(--aria-color-primary); +} + +.disabled { + opacity: 0.8; + cursor: not-allowed; +} + +.switch_thumb { + background: var(--aria-color-white); + transition: all 250ms ease 0s; + align-self: flex-start; + border-radius: inherit; +} + +.thumb_small { + width: var(--aria-spacing-medium); + height: var(--aria-spacing-medium); +} + +.thumb_small.switch_thumb[data-checked] { + transform: translateX( + calc(var(--aria-spacing-xx-large) - var(--aria-spacing-medium)) + ); +} + +.thumb_medium { + width: var(--aria-spacing-large); + height: var(--aria-spacing-large); +} + +.thumb_medium.switch_thumb[data-checked] { + transform: translateX( + calc(var(--aria-spacing-xxx-large) - var(--aria-spacing-large)) + ); +} + +.thumb_large { + width: var(--aria-spacing-x-large); + height: var(--aria-spacing-x-large); +} + +.thumb_large.switch_thumb[data-checked] { + transform: translateX( + calc(var(--aria-spacing-xxxx-large) - var(--aria-spacing-x-large)) + ); +} diff --git a/switch/src/switch.tsx b/switch/src/switch.tsx new file mode 100644 index 0000000..1ab470c --- /dev/null +++ b/switch/src/switch.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { VisuallyHidden } from '@react-aria/visually-hidden'; +import { useToggleState } from '@react-stately/toggle'; +import { useFocusRing } from '@react-aria/focus'; +import { useSwitch } from '@react-aria/switch'; +import type { AriaSwitchProps } from '@react-types/switch'; +import styles from './switch.module.scss'; + +export type SwitchProps = AriaSwitchProps & { + /** + Use the size prop to change the size of the switch. You can set the value to 'small', 'medium' or 'large'. + */ + size: 'small' | 'medium' | 'large'; +}; + +/** + The Switch component is used as an alternative for the checkbox component. You can switch between enabled or disabled states. +*/ +export const Switch = ({ size = 'medium', ...rest }: SwitchProps) => { + const state = useToggleState(rest); + const ref = React.useRef(); + const { inputProps } = useSwitch(rest, state, ref); + const { focusProps } = useFocusRing(); + + const dataChecked = state.isSelected ? { 'data-checked': true } : {}; + + return ( + + ); +}; diff --git a/switch/stories/index.stories.tsx b/switch/stories/index.stories.tsx new file mode 100644 index 0000000..a5ec287 --- /dev/null +++ b/switch/stories/index.stories.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Switch } from '../index'; +import classes from './stories.module.css'; + +export const switch_ = () => ( +
+ Small + Medium + Large +
+); + +export const switch_disabled = () => ( +
+ + Small + + + Medium + + + Large + +
+); diff --git a/switch/stories/stories.module.css b/switch/stories/stories.module.css new file mode 100644 index 0000000..3d93f77 --- /dev/null +++ b/switch/stories/stories.module.css @@ -0,0 +1,6 @@ +.container { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 6rem; +} diff --git a/transition/doc/transition.mdx b/transition/doc/transition.mdx new file mode 100644 index 0000000..70c10bd --- /dev/null +++ b/transition/doc/transition.mdx @@ -0,0 +1,8 @@ +import { mdx } from '@mdx-js/react'; +import { StyleShowcases } from '@divriots/dockit-react/style-showcases'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +## Transition + + diff --git a/transition/src/_transition.scss b/transition/src/_transition.scss new file mode 100644 index 0000000..f868fbc --- /dev/null +++ b/transition/src/_transition.scss @@ -0,0 +1,7 @@ +:root { + --aria-transition-x-slow: 1000ms; + --aria-transition-slow: 500ms; + --aria-transition-medium: 250ms; + --aria-transition-fast: 150ms; + --aria-transition-x-fast: 50ms; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..640ad4d --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ESNext", + "allowJs": true, + "allowNonTsExtensions": true, + "experimentalDecorators": true, + "jsx": "react", + "reactNamespace": "React", + "module": "ESNext", + "moduleResolution": "Node", + "sourceMap": true, + "paths": { + "~/*": ["*"], + "@divriots/starter-react-aria/*": ["*"] + } + } +} \ No newline at end of file diff --git a/typography/doc/typography.mdx b/typography/doc/typography.mdx new file mode 100644 index 0000000..f71cbca --- /dev/null +++ b/typography/doc/typography.mdx @@ -0,0 +1,44 @@ +import { mdx } from '@mdx-js/react'; +import { StyleShowcases } from '@divriots/dockit-react/style-showcases'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +## Font Family + + + +## Font Size + + + +## Font Weight + + + +## Letter Spacing + + + +## Line Height + + diff --git a/typography/src/_typography.scss b/typography/src/_typography.scss new file mode 100644 index 0000000..bf4a71a --- /dev/null +++ b/typography/src/_typography.scss @@ -0,0 +1,30 @@ +:root { + --aria-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol'; + --aria-font-family-serif: Georgia, 'Times New Roman', serif; + --aria-font-family-mono: Menlo, Monaco, 'Courier New', monospace; + + --aria-font-size-xx-small: 0.625rem; + --aria-font-size-x-small: 0.75rem; + --aria-font-size-small: 0.875rem; + --aria-font-size-medium: 1rem; + --aria-font-size-large: 1.25rem; + --aria-font-size-x-large: 1.5rem; + --aria-font-size-xx-large: 2.25rem; + --aria-font-size-xxx-large: 3rem; + --aria-font-size-xxxx-large: 4.5rem; + + --aria-font-weight-light: 300; + --aria-font-weight-normal: 400; + --aria-font-weight-semibold: 500; + --aria-font-weight-bold: 700; + + --aria-letter-spacing-dense: -0.015em; + --aria-letter-spacing-normal: normal; + --aria-letter-spacing-loose: 0.075em; + + --aria-line-height-dense: 1.4; + --aria-line-height-normal: 1.8; + --aria-line-height-loose: 2.2; +} diff --git a/z-index/doc/z-index.mdx b/z-index/doc/z-index.mdx new file mode 100644 index 0000000..bf54ba6 --- /dev/null +++ b/z-index/doc/z-index.mdx @@ -0,0 +1,8 @@ +import { mdx } from '@mdx-js/react'; +import { StyleShowcases } from '@divriots/dockit-react/style-showcases'; +import { Layout } from '~/mdx-layout'; +export default Layout; + +## Z-Index + +; diff --git a/z-index/src/_z-index.scss b/z-index/src/_z-index.scss new file mode 100644 index 0000000..89ebc4d --- /dev/null +++ b/z-index/src/_z-index.scss @@ -0,0 +1,7 @@ +:root { + --aria-z-index-drawer: 700; + --aria-z-index-dialog: 800; + --aria-z-index-dropdown: 900; + --aria-z-index-toast: 950; + --aria-z-index-tooltip: 1000; +}