ECNIM-377 (#25)

* feat: added new style pack for spinner component

* feat: added RELEASE_PROCESS.md

* feat: create new component Spinner

* test: create new component Spinner

* docs: create new component Spinner

* feat: create new component Spinner

* feat: create yarn version

* feat: create yarn version

* feat: publish release candidate

.github/workflows/version.yml

@@ -3,7 +3,7 @@ name: Version
 on:
   pull_request:
     branches:
-      - candidate
+      - master
 
 jobs:
   check-version:

.yarn/versions/13681ddf.yml

@@ -0,0 +1,13 @@
+releases:
+  "@nimbus-ds/spinner": major
+  "@nimbus-ds/styles": minor
+
+declined:
+  - nimbus-design-system
+  - "@nimbus-ds/badge"
+  - "@nimbus-ds/chip"
+  - "@nimbus-ds/icon"
+  - "@nimbus-ds/skeleton"
+  - "@nimbus-ds/tag"
+  - "@nimbus-ds/text"
+  - "@nimbus-ds/title"

CHANGELOG.md

@@ -3,6 +3,12 @@
 This is the log of notable changes to the Design System Nimbus that are developer-facing.
 Package-specific changes not released in any package will be added here just before the release. Until then, you can find them in changelogs of the individual packages (see [packages](./packages) directory).
 
+## 2022-09-13
+
+### 🎉 New features
+
+- Added RELEASE_PROCESS.md. ([#25](https://github.com/TiendaNube/nimbus-design-system/pull/25) by [@juniorconquista](https://github.com/juniorconquista))
+
 ## 2022-09-01
 
 ### 📚 3rd party library updates

RELEASE_PROCESS.md

@@ -0,0 +1,45 @@
+# Release process
+
+## Overview
+
+While our release schedule is flexible, our general strategy is to release several larger improvements inside each stable release. In order to provide faster access to fixes and enhancements between main releases we provide release candidates which are published on every merge into `master`.
+
+While the versioning and publishing of our components is mostly automated via scripts, updates to our [documentation website](https://nimbus.nubestaging.com/overview/getting-started) is currently a manual process. We are working to improve this but for now this outline should help contributors with the process.
+
+## Release strategy
+
+We track versions during the pull request process. As features are added, modified or improved it's important to keep track of these via versioning.
+
+The easiest way to track changes before raising a PR is to run `yarn bump:check --i`, this will prompt you to update the semver based on files that have been modified and will store an update file in `.yarn/versions/`, this is later consumed when publishing new versions. Be sure to check-in these files along with your code changes.
+
+Currently also with a gihub action that also validates on each pull request if the versions have changed according to the changes made to the code.
+
+### Release candidates
+
+1. Run `yarn bump:check`
+1. Run `yarn npm login` and supply your credentials (ensure you have access to the org scope for publishing)
+1. Run `yarn publish:next`
+1. Commit the resulting changes directly to `current branch`
+
+### Publishing a stable release
+
+Stable versions are automatically published when new changes are merged into `master`. If you want to publish a version manually, you can do so by following the candidate process, but replacing `yarn publish:next` with `yarn publish:stable`.
+After merging into `master`, a new version of [our component stories](https://tiendanube.github.io/nimbus-design-system) is generated automatically.
+
+## Updating the documentation
+
+Our documentation is in a [separate repository](https://github.com/TiendaNube/nimbus-doc) and updating it is a three-step process:
+
+1. Write and update the [changelog in pt-BR](https://github.com/TiendaNube/nimbus-doc/blob/devel/data/overview/pt-BR/releases.mdx)
+2. Write and update the [changelog in es-AR](https://github.com/TiendaNube/nimbus-doc/blob/devel/data/overview/es-AR/releases.mdx)
+3. Download package version(s) and create/update pages for each version change
+4. Perform documentation updates and remove live demos from previous versions
+
+Steps 3 and 4 are usually generated as separate pull requests to make it easier to review changes.
+
+### Creating new version pages
+
+This is as simple as duplicating the most recent page and updating the version number to match the release. A few things to keep in mind:
+
+- We only provide live demos for the latest version of a package, so remember to disable/remove the previous live demo (this avoids changes that affect older versions in our docs)
+- If the received version is a patch that does not require docs update, you can simply change the page name to match the new version instead of duplicating the same content

packages/react/Spinner/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+Spinner is a loading indicator and we use it to show the user that there is more content loading in real time.
+
+## 2022-09-13
+
+### 📚 3rd party library updates
+
+- Added `terser-webpack-plugin@5.3.5`. ([#25](https://github.com/TiendaNube/nimbus-design-system/pull/25) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `ts-loader@9.3.1`. ([#25](https://github.com/TiendaNube/nimbus-design-system/pull/25) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `typescript@4.7.4`. ([#25](https://github.com/TiendaNube/nimbus-design-system/pull/25) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `webpack@5.74.0`. ([#25](https://github.com/TiendaNube/nimbus-design-system/pull/25) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `webpack-cli@4.10.0`. ([#25](https://github.com/TiendaNube/nimbus-design-system/pull/25) by [@juniorconquista](https://github.com/juniorconquista))
+
+### 🎉 New features
+
+- Added `size` and `color` properties to the Component. ([#25](https://github.com/TiendaNube/nimbus-design-system/pull/25) by [@juniorconquista](https://github.com/juniorconquista))
+- Added stories on Component. ([#25](https://github.com/TiendaNube/nimbus-design-system/pull/25) by [@juniorconquista](https://github.com/juniorconquista))

packages/react/Spinner/README.md

@@ -0,0 +1,17 @@
+# `@nimbus-ds/spinner`
+
+[![@nimbus-ds/spinner](https://img.shields.io/npm/v/@nimbus-ds/spinner?label=%40nimbus-ds%2Fspinner)](https://www.npmjs.com/package/@nimbus-ds/spinner)
+
+Spinner is a loading indicator and we use it to show the user that there is more content loading in real time.
+
+## Installation
+
+```sh
+$ yarn add @nimbus-ds/spinner
+# or
+$ npm install @nimbus-ds/spinner
+```
+
+## Usage
+
+View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/spinner).

packages/react/Spinner/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@nimbus-ds/spinner",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn build:types && webpack",
+    "build:types": "tsc --emitDeclarationOnly --declaration true --declarationDir ./dist --baseUrl ../../../",
+    "clean": "rm -rf dist",
+    "version": "yarn version"
+  },
+  "dependencies": {
+    "@nimbus-ds/styles": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "homepage": "https://nimbus.nuvemshop.com.br/documentation",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TiendaNube/nimbus-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
+  },
+  "devDependencies": {
+    "@vanilla-extract/dynamic": "^2.0.2",
+    "terser-webpack-plugin": "^5.3.5",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
+  },
+  "stableVersion": "0.0.0"
+}

packages/react/Spinner/src/Spinner.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { spinner, utils } from "@nimbus-ds/styles";
+
+import { SpinnerProps } from "./spinner.types";
+import { sizes } from "./spinner.definitions";
+
+const Spinner: React.FC<SpinnerProps> = ({
+  className: _className,
+  style: _style,
+  color = "primary.interactive",
+  size = "large",
+  ...rest
+}) => {
+  const scale = useMemo(
+    () => (typeof size === "number" ? `${size}px` : `${sizes[size] || 32}px`),
+    [size]
+  );
+
+  return (
+    <svg
+      viewBox="0 0 50 50"
+      className={[spinner.sprinkle({ color }), spinner.style].join(" ")}
+      style={assignInlineVars({
+        [utils.vars.width]: scale,
+        [utils.vars.height]: scale,
+      })}
+      {...rest}
+    >
+      <circle cx="25" cy="25" r="20" fill="none" strokeWidth="6" />
+    </svg>
+  );
+};
+
+export { Spinner };

packages/react/Spinner/src/index.ts

@@ -0,0 +1,6 @@
+import { Spinner } from "./Spinner";
+import "@nimbus-ds/styles/packages/spinner/index.css";
+
+export { Spinner } from "./Spinner";
+export type { SpinnerProps } from "./spinner.types";
+export default Spinner;

packages/react/Spinner/src/spinner.definitions.ts

@@ -0,0 +1,5 @@
+export const sizes = {
+  large: 32,
+  medium: 24,
+  small: 16,
+};

packages/react/Spinner/src/spinner.spec.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { Spinner } from "./Spinner";
+import { SpinnerProps } from "./spinner.types";
+
+const makeSut = (rest: SpinnerProps) => {
+  render(<Spinner {...rest} data-testid="spinner-element" />);
+};
+
+describe("GIVEN <Spinner />", () => {
+  describe("THEN should correctly render the submitted color", () => {
+    it("THEN should correctly render the color primary.interactive", () => {
+      makeSut({ color: "primary.interactive" });
+      expect(
+        screen.getByTestId("spinner-element").getAttribute("class")
+      ).toContain("color_primary.interactive");
+    });
+
+    it("THEN should correctly render the color primary.textLow", () => {
+      makeSut({ color: "primary.textLow" });
+      expect(
+        screen.getByTestId("spinner-element").getAttribute("class")
+      ).toContain("color_primary.textLow");
+    });
+
+    it("THEN should correctly render the color success.interactive", () => {
+      makeSut({ color: "success.interactive" });
+      expect(
+        screen.getByTestId("spinner-element").getAttribute("class")
+      ).toContain("color_success.interactive");
+    });
+
+    it("THEN should correctly render the color success.textLow", () => {
+      makeSut({ color: "success.textLow" });
+      expect(
+        screen.getByTestId("spinner-element").getAttribute("class")
+      ).toContain("color_success.textLow");
+    });
+
+    it("THEN should correctly render the color danger.interactive", () => {
+      makeSut({ color: "danger.interactive" });
+      expect(
+        screen.getByTestId("spinner-element").getAttribute("class")
+      ).toContain("color_danger.interactive");
+    });
+
+    it("THEN should correctly render the color danger.textLow", () => {
+      makeSut({ color: "danger.textLow" });
+      expect(
+        screen.getByTestId("spinner-element").getAttribute("class")
+      ).toContain("color_danger.textLow");
+    });
+
+    it("THEN should correctly render the color neutral.interactive", () => {
+      makeSut({ color: "neutral.interactive" });
+      expect(
+        screen.getByTestId("spinner-element").getAttribute("class")
+      ).toContain("color_neutral.interactive");
+    });
+
+    it("THEN should correctly render the color neutral.textLow", () => {
+      makeSut({ color: "neutral.textLow" });
+      expect(
+        screen.getByTestId("spinner-element").getAttribute("class")
+      ).toContain("color_neutral.textLow");
+    });
+  });
+
+  describe("THEN should correctly render the submitted size", () => {
+    it("THEN should correctly render the size large", () => {
+      makeSut({ size: "large" });
+      const spinner = screen.getByTestId("spinner-element");
+      expect(spinner.getAttribute("style")).toMatch(/--width__\w{0,9}: 32px;/);
+      expect(spinner.getAttribute("style")).toMatch(/--height__\w{0,9}: 32px;/);
+    });
+
+    it("THEN should correctly render the size medium", () => {
+      makeSut({ size: "medium" });
+      const spinner = screen.getByTestId("spinner-element");
+      expect(spinner.getAttribute("style")).toMatch(/--width__\w{0,9}: 24px;/);
+      expect(spinner.getAttribute("style")).toMatch(/--height__\w{0,9}: 24px;/);
+    });
+
+    it("THEN should correctly render the size small", () => {
+      makeSut({ size: "small" });
+      const spinner = screen.getByTestId("spinner-element");
+      expect(spinner.getAttribute("style")).toMatch(/--width__\w{0,9}: 16px;/);
+      expect(spinner.getAttribute("style")).toMatch(/--height__\w{0,9}: 16px;/);
+    });
+
+    it("THEN should correctly render the size custom", () => {
+      makeSut({ size: 64 });
+      const spinner = screen.getByTestId("spinner-element");
+      expect(spinner.getAttribute("style")).toMatch(/--width__\w{0,9}: 64px;/);
+      expect(spinner.getAttribute("style")).toMatch(/--height__\w{0,9}: 64px;/);
+    });
+  });
+});

packages/react/Spinner/src/spinner.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { withA11y } from "@storybook/addon-a11y";
+
+import { Spinner } from "./Spinner";
+
+export default {
+  title: "Atomic/Spinner",
+  component: Spinner,
+  argTypes: {
+    source: { control: { disable: true } },
+  },
+  parameters: {
+    withA11y: { decorators: [withA11y] },
+  },
+} as ComponentMeta<typeof Spinner>;
+
+const IconTemplate: ComponentStory<typeof Spinner> = (args) => (
+  <Spinner {...args} />
+);
+
+export const large = IconTemplate.bind({});
+large.args = {
+  size: "large",
+};
+
+export const medium = IconTemplate.bind({});
+medium.args = {
+  size: "medium",
+};
+
+export const small = IconTemplate.bind({});
+small.args = {
+  size: "small",
+};

packages/react/Spinner/src/spinner.types.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+
+import { spinner } from "@nimbus-ds/styles";
+
+export interface SpinnerProps extends HTMLAttributes<SVGElement> {
+  /** Spinner size */
+  size?: "small" | "medium" | "large" | number;
+  /** Spinner color */
+  color?: keyof typeof spinner.properties;
+}

packages/react/Spinner/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./src"],
+  "exclude": ["src/**/*.spec.tsx", "src/**/*.stories.tsx"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": false,
+    "paths": {
+      "@nimbus-ds/styles": ["../../styles/src"]
+    }
+  }
+}