First commit

.babelrc.json

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "babel-plugin-react-docgen"
+  ]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules/

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 <div>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.

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 <br/><small>_by_ ‹div›RIOTS</small>
+
+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 => (
+  <button className={`${styles.button}`}>
+    // ...
+  </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 = () => <Button>Primary</Button>;
+```
+
+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/)

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';

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
+
+<StyleShowcases
+  prefix="--aria-border-radius"
+  styleKey="borderRadius"
+  componentProps={{ className: 'box' }}
+/>

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;
+}

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;
+}

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
+
+<Description of={Button} />
+
+## Usage
+
+```tsx
+import { Button } from '@divriots/starter-react-aria/button';
+
+<Button onPress={() => alert('Button pressed!')}>Test</Button>;
+```
+
+## Example
+
+<Playground
+  scope={{ Button }}
+  code={`
+<Button size="small" onPress={() => alert('small button pressed!')}>Small</Button>
+<Button size="medium" onPress={() => alert('medium button pressed!')}>Medium</Button>
+<Button size="large" onPress={() => alert('large button pressed!')}>Large</Button>
+<br />
+
+<Button primary onPress={() => alert('small button pressed!')}>
+  Primary
+</Button>
+<Button secondary onPress={() => alert('medium button pressed!')}>
+  Secondary
+</Button>
+<Button isDisabled onPress={() => alert('large button pressed!')}>
+  Disabled
+</Button>
+`} />
+
+## Props
+
+<Props of={Button} />

button/index.ts

@@ -0,0 +1 @@
+export * from './src/button';

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);
+}

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<ElementType> & {
+  /**
+  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 (
+    <button
+      {...buttonProps}
+      ref={ref}
+      className={`
+      ${styles.button} ${styles[size]}
+      ${secondary ? styles.secondary : ''}
+      ${rest.isDisabled ? styles.disabled : ''}
+      `}
+    >
+      {children}
+    </button>
+  );
+};

button/stories/index.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button } from '../index';
+
+export const primary = () => (
+  <>
+    <Button size="small" onPress={() => alert('Button pressed!')}>
+      Small
+    </Button>
+    <Button size="medium" onPress={() => alert('Button pressed!')}>
+      Medium
+    </Button>
+    <Button size="large" onPress={() => alert('Button pressed!')}>
+      Large
+    </Button>
+  </>
+);
+
+export const secondary = () => (
+  <>
+    <Button secondary size="small" onPress={() => alert('Button pressed!')}>
+      Small
+    </Button>
+    <Button secondary size="medium" onPress={() => alert('Button pressed!')}>
+      Medium
+    </Button>
+    <Button secondary size="large" onPress={() => alert('Button pressed!')}>
+      Large
+    </Button>
+  </>
+);
+
+export const disabled = () => (
+  <>
+    <Button isDisabled size="small" onPress={() => alert('Button pressed!')}>
+      Small
+    </Button>
+    <Button isDisabled size="medium" onPress={() => alert('Button pressed!')}>
+      Medium
+    </Button>
+    <Button isDisabled size="large" onPress={() => alert('Button pressed!')}>
+      Large
+    </Button>
+  </>
+);