@spaced-out/ui-design-system 0.1.16 → 0.1.17

package/.cspell/custom-words.txt

@@ -9,6 +9,7 @@ datetime
 DEFAULTTEXT
 dismissable
 eqeqeq
+fbjs
 Fennimore
 flowtype
 fontawesome
@@ -32,6 +33,7 @@ rgba
 sbdocs
 Stapleton
 superrover
+systemjs
 testid
 tnum
 transclude
@@ -39,4 +41,5 @@ Typeahead
 typeof
 Verda
 xmark
+yourcomponentname
 yxxx

package/.flowconfig

@@ -42,4 +42,4 @@ deprecated-type=warn
 sketchy-number=error
 unclear-type=warn
 unnecessary-invariant=warn
-unnecessary-optional-chain=warn
+unnecessary-optional-chain=warn

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.17](https://github.com/spaced-out/ui-design-system/compare/v0.1.16...v0.1.17) (2023-04-24)
+
+
+### Features
+
+* button loading - focus management - forwardref - simple imports ([#105](https://github.com/spaced-out/ui-design-system/issues/105)) ([29d4b4f](https://github.com/spaced-out/ui-design-system/commit/29d4b4fe3c65ad752b97c59acc947380ad996280))
+
 ### [0.1.16](https://github.com/spaced-out/ui-design-system/compare/v0.1.15...v0.1.16) (2023-04-19)
 
 

package/CONTRIBUTING.md

@@ -2,6 +2,22 @@
 
 # Contribution Guidelines
 
+- [Intro](#intro)
+- [Development](#development)
+  - [Environment Setup](#environment-setup)
+  - [Generating New Component](#generating-new-component)
+  - [Generating New Hook](#generating-new-hook)
+  - [Exports](#exports)
+  - [Imports](#imports)
+  - [Adding Stories](#adding-stories)
+  - [Using Design Tokens](#using-design-tokens)
+  - [Testing Genesis Design System Locally](#testing-genesis-design-system-locally)
+- [Troubleshooting local development](#troubleshooting-local-development)
+- [Commits](#commits)
+- [Add yourself to the contributor list ✨](#add-yourself-to-the-contributor-list)
+
+## Intro
+
 Genesis Design System is created using:
 
 - [Gulp](https://gulpjs.com/)
@@ -16,7 +32,7 @@ It also features:
 
 ## Development
 
-<br/>
+Follow the below mentioned steps to setup a dev environment locally:
 
 ### Environment Setup
 
@@ -43,10 +59,10 @@ yarn storybook
 
 > The `storybook` server runs on port **6006** and url is opened automatically on successful dev build.
 
-### Generating New Components
+### Generating New Component
 
 We've included a handy NodeJS util file under `scripts` called `create-component.js`. Instead of copy pasting components to create a new component,
-you can instead run this command to generate all the files you need to start building out a new component. To use it:
+you can instead run this command to generate all the files you need to start building out a new component. This also has a story boilerplate to help you kickstart component dev testing. To use it:
 
 ```bash
 yarn generate YourComponentName
@@ -62,13 +78,39 @@ yarn generate YourComponentName
       YourComponentName.stories.jsx
       YourComponentName.module.css
       YourComponentName.stories.module.css
+      index.js
 ```
 
 > The default templates for each file can be modified under `scripts/templates`.
 
+> This script also appends YourComponentName exports in **`src/components/index.js`**.
+
+> After component creation your component story would be visible at `/?path=/docs/components-yourcomponentname`.
+
+### Generating New Hook
+
+There is also a handy NodeJS util file under `scripts` called `create-hook.js`. This generates a new hook that you need and appends exports in the `index.js`. To use it:
+
+```bash
+yarn generateHook yourHook
+```
+
+> This will generate:
+
+```bash
+/src
+  /hooks
+    yourHook.js
+```
+
+> This script also appends YourComponentName exports in **`src/hooks/index.js`**.
+
 ### Exports
 
-Export Component as named export and Component Props/Types e.g. export Modal from `./src/components/Modal/index.js`.
+Each component folder should have an index.js which exports all required component(s) | types.
+Export hook | style | util | type as named export and add these exports to the index.js of respective folder root.
+
+**Note:** Make sure you have all your exports listed in `src/index.js`. Consumers use this as an entry point to do all imports.
 
 ### Imports
 
@@ -126,6 +168,10 @@ For every change in `ui_design_system` that you want to propagate to `consumer`
   yarn upgrade @spaced-out/ui-design-system@file:../../ui-design-system
 ```
 
+## Troubleshooting local development
+
+- Because we are using react hooks and having react as a peerDependency - if you want to develop locally and encounter issues with "invalid hook call" [See this github thread](https://github.com/facebook/react/issues/13991). The quick fix is in your webpack config file alias react to resolve the node_modules path
+
 ## Commits
 
 Each commit should follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) guidelines
@@ -144,9 +190,9 @@ Most commonly used commit prefixes:
 
 > `build:` Commits, that affect build components like build tool, ci pipeline, dependencies, project version, etc.
 
-## Add yourself to the maintainer list
+## Add yourself to the contributor list
 
-To add yourself to the `maintainers` table in the README and INTRODUCTION stories:
+To add yourself to the `contributors` table in the README and INTRODUCTION stories:
 
 > Run the following commands from the root of the repo:
 

package/README.md

@@ -2,6 +2,24 @@
 
 # Genesis Design System
 
+- [Intro](#intro)
+- [Usage](#usage)
+  - [Installation](#installation)
+  - [Component Usage](#component-usage)
+    - [Using Components](#using-components)
+    - [Setting Up Component Aliases](#setting-up-component-aliases)
+    - [Setting Up Fonts](#setting-up-fonts)
+    - [Using Genesis Design Tokens](#using-genesis-design-tokens)
+      - [CSS Tokens](#css-tokens)
+      - [JS Tokens](#js-tokens)
+    - [Setting Up Design Token Aliases](#setting-up-design-token-aliases)
+- [Documentation](#documentation)
+- [Contributions](#contributions)
+- [Changelog](#changelog)
+- [Contributors ✨](#contributors)
+
+## Intro
+
 Genesis design system consists of a set of tools and protocols that unify design and development across surfaces (platforms) to deliver consistent
 user experiences. The system utilizes workflow automation to streamline the design and development process. It's comprised of a number of React
 web components that each play a unique role within the product development cycle.
@@ -11,6 +29,10 @@ development lifecycle.
 
 ## Usage
 
+Follow the below mentioned guide for installation and usage instructions
+
+### Installation
+
 To install `@spaced-out/ui-design-system` in your project, you will need to run the
 following command using [yarn](https://yarnpkg.com/):
 
@@ -18,25 +40,75 @@ following command using [yarn](https://yarnpkg.com/):
 yarn add @spaced-out/ui-design-system
 ```
 
+### Component Usage
+
 Usage of the component (after the library installed as a dependency in project) will be:
 
+#### Using Components
+
 ```js
 import React from 'react';
+
+// There are multiple ways of importing a component
+
 import {Button} from '@spaced-out/ui-design-system/lib/components/Button';
 
+/** We also export all components | hooks | styles | utils | types from a common
+ * index file located at @spaced-out/ui-design-system/lib.
+ *
+ * For multiple imports this can be used
+ */
+
+import {
+  Button,
+  BodyMedium,
+  TEXT_COLORS,
+  Toast,
+  Dropdown,
+} from '@spaced-out/ui-design-system/lib';
+
 const App = () => (
-  <div className="app-container">
+  <div className={css.container}>
     <Button>Hello world</Button>
+    <BodyMedium color={TEXT_COLORS.neutral}>Some text</BodyMedium>
   </div>
 );
 
 export default App;
 ```
 
+#### Setting Up Component Aliases
+
+You can also set up aliases in your build tool to further simplify imports if you want.
+eg. This webpack config set up an alias for `@spaced-out/ui-design-system/lib` to `ui-design-system`
+
+```js
+const {MODE, DEVELOPMENT, RESOLVE_MODULES_DIRS} = require('./constants');
+
+exports.default = {
+  mode: MODE,
+
+  devtool: DEVELOPMENT ? 'eval-cheap-module-source-map' : 'source-map',
+
+  resolve: {
+    symlinks: false,
+    modules: RESOLVE_MODULES_DIRS,
+    alias: {
+      common: 'src/styles/common.css',
+      designSystem2021: 'src/styles/design-system-2021.css',
+      sentry: '@sentry/browser',
+      'react-router': '@spaced-out/react-router',
+      sculpt: '@spaced-out/sculpt',
+      'ui-design-system': '@spaced-out/ui-design-system/lib',
+    },
+  },
+};
+```
+
 For more information about each component, check out
 [Storybook](https://spaced-out.github.io/ui-design-system).
 
-**&rarr; Fonts**
+#### Setting Up Fonts
 
 By default Genesis uses `'Centra No 2'` font. To add this font in your project you need to load this font. The recommended way to do it is by adding the following in your global css.
 
@@ -72,25 +144,89 @@ By default Genesis uses `'Centra No 2'` font. To add this font in your project y
 }
 ```
 
-**&rarr; Using Genesis Design Tokens**
+#### Using Genesis Design Tokens
 
 Design tokens are exported as `.css` and `.js`. You can consume them easily by
 
+##### CSS Tokens
+
 CSS use:
 
-```js
+```css
 @value (size2) from '@spaced-out/ui-design-system/lib/styles/variables/_size.css';
 
+/* We also export all style variable(design tokens) and common classes from a common index
+file located at @spaced-out/ui-design-system/lib/styles/index.css */
+
+/* For @value from Multiple css files use this */
+
+@value (
+  colorFillPrimary,
+  colorTextSecondary,
+  colorTextDisabled,
+  spaceXXSmall,
+  spaceNone,
+  spaceSmall,
+  spaceXSmall,
+  size34,
+  sizeFluid,
+  size40
+  ) from '@spaced-out/ui-design-system/lib/styles/index.css';
+
 .example-container {
-    height: size2
+  height: size2;
+  composes: motionEaseInEaseOut from '@spaced-out/ui-design-system/lib/styles/index.css';
 }
 ```
 
+##### JS Tokens
+
 JS use:
 
 ```js
-import {size2} from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
-import * as SIZES from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
+import {size2} from '@spaced-out/ui-design-system/lib/styles/variables/_size.js';
+
+/* We also export all style variable(design tokens) from a common index
+file located at @spaced-out/ui-design-system/lib */
+
+/* For multiple design token impoets use this */
+
+import {
+  sizeFluid,
+  size2,
+  spaceNone,
+  colorTextNeutral,
+  borderRadiusSmall,
+} from '@spaced-out/ui-design-system/lib';
+```
+
+#### Setting Up Design Token Aliases
+
+You can also set up aliases in your build tool to further simplify imports if you want.
+eg. This webpack config set up an alias for `@spaced-out/ui-design-system/lib/styles/index.css` to `uiDesignSystem`
+
+```js
+const {MODE, DEVELOPMENT, RESOLVE_MODULES_DIRS} = require('./constants');
+
+exports.default = {
+  mode: MODE,
+
+  devtool: DEVELOPMENT ? 'eval-cheap-module-source-map' : 'source-map',
+
+  resolve: {
+    symlinks: false,
+    modules: RESOLVE_MODULES_DIRS,
+    alias: {
+      common: 'src/styles/common.css',
+      designSystem2021: 'src/styles/design-system-2021.css',
+      uiDesignSystem: '@spaced-out/ui-design-system/lib/styles/index.css',
+      sentry: '@sentry/browser',
+      'react-router': '@spaced-out/react-router',
+      sculpt: '@spaced-out/sculpt',
+      'ui-design-system': '@spaced-out/ui-design-system/lib',
+    },
+  },
+};
 ```
 
 ## Documentation
@@ -105,7 +241,7 @@ Check out our [**Contribution Guide**](https://spaced-out.github.io/ui-design-sy
 
 Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system/?path=/docs/changelog--page)
 
-## Maintainers ✨
+## Contributors
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->

package/gulpfile.js

@@ -5,6 +5,7 @@ const replace = require('gulp-replace');
 
 const babelRc = require('./babel.config');
 
+
 const doNotBuildThese = [
   'src/__tests__/**',
   'src/**/*.test.js',

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const COLOR_SEQUENCE = ['blue', 'green', 'orange', 'red', 'gray'];
-const AvatarGroup = _ref => {
+const AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     size = 'medium',
@@ -116,7 +116,8 @@ const AvatarGroup = _ref => {
       [_AvatarGroupModule.default.largeSize]: size === 'large',
       [_AvatarGroupModule.default.mediumSize]: size === 'medium',
       [_AvatarGroupModule.default.smallSize]: size === 'small'
-    })
+    }),
+    ref: ref
   }, childrenWithProps);
-};
+});
 exports.AvatarGroup = AvatarGroup;

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -29,118 +29,127 @@ export type AvatarGroupProps = {
   tooltipElevation?: string,
 };
 
-export const AvatarGroup = ({
-  children,
-  size = 'medium',
-  borderColor = colorBackgroundTertiary,
-  maxTooltipLines = 7,
-  placement = 'top',
-  maxAvatars = 5,
-  tooltipElevation,
-}: AvatarGroupProps): React.Node => {
-  const childAvatarCount = React.Children.count(children);
-
-  const leftOverlap = {
-    small: spaceXXSmall,
-    medium: `${parseInt(spaceSmall) / 2}px`,
-    large: spaceXSmall,
-  };
-
-  let colorIndex = -1;
-
-  const avatarInGroup = (child, index, color) => {
-    const {classNames} = child.props;
-    const {wrapper, ...restClassNames} = classNames || {};
-    return React.cloneElement(child, {
-      size,
-      classNames: {
-        wrapper: classify(css.avatarInGroup, wrapper),
-        ...restClassNames,
-      },
-      style: {
-        borderColor,
-        marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`,
-      },
-      color,
-    });
-  };
-
-  const childrenArray = React.Children.toArray(children);
-  const totalAvatarCount = childrenArray.length;
-  const plusAvatar = () => {
-    const nameList = [];
-
-    for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
-      const child = childrenArray[i];
-      const {text} = child.props;
-      if (text) {
-        nameList.push(text);
+export const AvatarGroup: React$AbstractComponent<
+  AvatarGroupProps,
+  HTMLDivElement,
+> = React.forwardRef<AvatarGroupProps, HTMLDivElement>(
+  (
+    {
+      children,
+      size = 'medium',
+      borderColor = colorBackgroundTertiary,
+      maxTooltipLines = 7,
+      placement = 'top',
+      maxAvatars = 5,
+      tooltipElevation,
+    }: AvatarGroupProps,
+    ref,
+  ): React.Node => {
+    const childAvatarCount = React.Children.count(children);
+
+    const leftOverlap = {
+      small: spaceXXSmall,
+      medium: `${parseInt(spaceSmall) / 2}px`,
+      large: spaceXSmall,
+    };
+
+    let colorIndex = -1;
+
+    const avatarInGroup = (child, index, color) => {
+      const {classNames} = child.props;
+      const {wrapper, ...restClassNames} = classNames || {};
+      return React.cloneElement(child, {
+        size,
+        classNames: {
+          wrapper: classify(css.avatarInGroup, wrapper),
+          ...restClassNames,
+        },
+        style: {
+          borderColor,
+          marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`,
+        },
+        color,
+      });
+    };
+
+    const childrenArray = React.Children.toArray(children);
+    const totalAvatarCount = childrenArray.length;
+    const plusAvatar = () => {
+      const nameList = [];
+
+      for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
+        const child = childrenArray[i];
+        const {text} = child.props;
+        if (text) {
+          nameList.push(text);
+        }
       }
-    }
-
-    const NameListNode = () => (
-      <span>
-        {nameList.map((name) => (
-          <React.Fragment key={name}>
-            {name}
-            <br />
-          </React.Fragment>
-        ))}
-      </span>
-    );
-    return (
-      <Tooltip
-        body={<NameListNode />}
-        bodyMaxLines={maxTooltipLines}
-        placement={placement}
-        elevation={tooltipElevation}
-      >
-        <div className={css.plusAvatar}>
-          <BaseAvatar
-            size={size}
-            color="gray"
-            text={`+${childAvatarCount - maxAvatars + 1}`}
-            classNames={{wrapper: css.avatarInGroup}}
-            style={{
-              borderColor,
-              marginLeft: `-${leftOverlap[size]}`,
-            }}
-          />
-        </div>
-      </Tooltip>
-    );
-  };
-
-  const childrenWithProps = React.Children.map(children, (child, index) => {
-    const {imageSrc} = child.props;
-    if (!imageSrc) {
-      colorIndex++;
-      if (colorIndex === COLOR_SEQUENCE.length) {
-        colorIndex = 0;
+
+      const NameListNode = () => (
+        <span>
+          {nameList.map((name) => (
+            <React.Fragment key={name}>
+              {name}
+              <br />
+            </React.Fragment>
+          ))}
+        </span>
+      );
+      return (
+        <Tooltip
+          body={<NameListNode />}
+          bodyMaxLines={maxTooltipLines}
+          placement={placement}
+          elevation={tooltipElevation}
+        >
+          <div className={css.plusAvatar}>
+            <BaseAvatar
+              size={size}
+              color="gray"
+              text={`+${childAvatarCount - maxAvatars + 1}`}
+              classNames={{wrapper: css.avatarInGroup}}
+              style={{
+                borderColor,
+                marginLeft: `-${leftOverlap[size]}`,
+              }}
+            />
+          </div>
+        </Tooltip>
+      );
+    };
+
+    const childrenWithProps = React.Children.map(children, (child, index) => {
+      const {imageSrc} = child.props;
+      if (!imageSrc) {
+        colorIndex++;
+        if (colorIndex === COLOR_SEQUENCE.length) {
+          colorIndex = 0;
+        }
       }
-    }
 
-    const color = COLOR_SEQUENCE[colorIndex];
-    if (childAvatarCount <= maxAvatars) {
-      return avatarInGroup(child, index, color);
-    } else {
-      if (index < maxAvatars - 1) {
+      const color = COLOR_SEQUENCE[colorIndex];
+      if (childAvatarCount <= maxAvatars) {
         return avatarInGroup(child, index, color);
-      } else if (index === maxAvatars) {
-        return plusAvatar();
+      } else {
+        if (index < maxAvatars - 1) {
+          return avatarInGroup(child, index, color);
+        } else if (index === maxAvatars) {
+          return plusAvatar();
+        }
       }
-    }
-  });
-
-  return (
-    <div
-      className={classify(css.avatarGroupContainer, {
-        [css.largeSize]: size === 'large',
-        [css.mediumSize]: size === 'medium',
-        [css.smallSize]: size === 'small',
-      })}
-    >
-      {childrenWithProps}
-    </div>
-  );
-};
+    });
+
+    return (
+      <div
+        className={classify(css.avatarGroupContainer, {
+          [css.largeSize]: size === 'large',
+          [css.mediumSize]: size === 'medium',
+          [css.smallSize]: size === 'small',
+        })}
+        ref={ref}
+      >
+        {childrenWithProps}
+      </div>
+    );
+  },
+);

package/lib/components/Badge/Badge.js

@@ -22,7 +22,7 @@ const BADGE_COLOR = Object.freeze({
   indigo: _color.colorNeutralLightest
 });
 exports.BADGE_COLOR = BADGE_COLOR;
-const Badge = _ref => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     text,
@@ -35,7 +35,8 @@ const Badge = _ref => {
     }, classNames?.wrapper),
     style: {
       backgroundColor: BADGE_COLOR[fill]
-    }
+    },
+    ref: ref
   }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, null, text));
-};
+});
 exports.Badge = Badge;