@spaced-out/ui-design-system 0.0.1-alpha.0

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "esbenp.prettier-vscode", "simonsiefke.svg-preview", "flowtype.flow-for-vscode"]
+}

package/CHANGELOG.md

@@ -0,0 +1,73 @@
+# Changelog
+
+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.0.1-alpha.0](https://github.com/Spaced-Out/ui-design-system/compare/v0.0.0...v0.0.1-alpha.0) (2022-11-16)
+
+
+### Features
+
+* action and enter press ([359e652](https://github.com/Spaced-Out/ui-design-system/commit/359e65243e68885c43bb8fe9cf58ba34c8ab2998))
+* added Commitlint ([017a1ad](https://github.com/Spaced-Out/ui-design-system/commit/017a1adfd4a78ff1d41f55b697f73d68395f8954))
+* added font-awesome css ([8adad02](https://github.com/Spaced-Out/ui-design-system/commit/8adad023b27394196c9db1b43963eb9e6a26ce16))
+* Added standard version ([29ee01c](https://github.com/Spaced-Out/ui-design-system/commit/29ee01c795d84ba86f50b63d1927f00d91585735))
+* added tokens and used css vars ([12f5767](https://github.com/Spaced-Out/ui-design-system/commit/12f5767a4d1088dab09981da04e174a900ceacc1))
+* **checkbox:** [GDS-34] Checkbox and checkbox group ([#12](https://github.com/Spaced-Out/ui-design-system/issues/12)) ([5c4604a](https://github.com/Spaced-Out/ui-design-system/commit/5c4604a5585ee31ce5200fef8cac0ea4548c4848))
+* **docs:** [GDS-113] docs for form components and grid ([#32](https://github.com/Spaced-Out/ui-design-system/issues/32)) ([2337fd1](https://github.com/Spaced-Out/ui-design-system/commit/2337fd13a08f1a6754a25c382eab89bfe55768b7))
+* **docs:** tokens doc ([#33](https://github.com/Spaced-Out/ui-design-system/issues/33)) ([7df345c](https://github.com/Spaced-Out/ui-design-system/commit/7df345c64690940730d36d15c92a880c61508a30))
+* dropdown component ([#19](https://github.com/Spaced-Out/ui-design-system/issues/19)) ([8c8cf59](https://github.com/Spaced-Out/ui-design-system/commit/8c8cf59363034a568d45e7b98eaf8962462f82e0))
+* error case for radio and group ([88afa2b](https://github.com/Spaced-Out/ui-design-system/commit/88afa2b4750a62521ef6319ee3bf8d5711354663))
+* **grid:** [GDS-26] grid row and col + Import order lint rule ([#26](https://github.com/Spaced-Out/ui-design-system/issues/26)) ([02b988e](https://github.com/Spaced-Out/ui-design-system/commit/02b988e0f85de6a42022729c65cda09ade02cedb))
+* icon Menu ([#9](https://github.com/Spaced-Out/ui-design-system/issues/9)) ([6819536](https://github.com/Spaced-Out/ui-design-system/commit/68195362130e7cb587a7316611575baed2244dd2))
+* **icon:** added default values ([#5](https://github.com/Spaced-Out/ui-design-system/issues/5)) ([b4a4401](https://github.com/Spaced-Out/ui-design-system/commit/b4a440122b7f975cde3ed24ca984204832dac71a))
+* **icon:** iconName prop changed to name ([#10](https://github.com/Spaced-Out/ui-design-system/issues/10)) ([42dc229](https://github.com/Spaced-Out/ui-design-system/commit/42dc22940b7a585a1245a9d75fde54c51a3cd329))
+* **InContextAlert:** [GDS-58] In-Context Alert and Truncate component ([#27](https://github.com/Spaced-Out/ui-design-system/issues/27)) ([bd9827c](https://github.com/Spaced-Out/ui-design-system/commit/bd9827c093dc39ae76f2dd5d59a11feda5ea9d20))
+* input component ([#15](https://github.com/Spaced-Out/ui-design-system/issues/15)) ([c78842e](https://github.com/Spaced-Out/ui-design-system/commit/c78842e5ce73613fac4eb3cc9f290537c5573e90))
+* **loader:** [GDS-78] linear loader and circular loader ([#21](https://github.com/Spaced-Out/ui-design-system/issues/21)) ([44fe9dc](https://github.com/Spaced-Out/ui-design-system/commit/44fe9dc76920b7c6eadf70ee320fa2a08121e8c1))
+* master merged ([6927f37](https://github.com/Spaced-Out/ui-design-system/commit/6927f372106250474fe3b660783dfd633767fc8d))
+* notification and semantic color changes ([#30](https://github.com/Spaced-Out/ui-design-system/issues/30)) ([1dd6814](https://github.com/Spaced-Out/ui-design-system/commit/1dd68143deccbc401caad44e989de8981bef6686))
+* radio group ([adae899](https://github.com/Spaced-Out/ui-design-system/commit/adae899d567463bacd7ad1857b0e25b596acec16))
+* **RadioButton:** radio button component and story done ([cb0f64e](https://github.com/Spaced-Out/ui-design-system/commit/cb0f64e95c35ec22d8f7e438a788aa228d31c253))
+* search component ([#20](https://github.com/Spaced-Out/ui-design-system/issues/20)) ([39c6560](https://github.com/Spaced-Out/ui-design-system/commit/39c65606508682a5aa448915295d7b7b99ace8c4))
+* storybook test ([#14](https://github.com/Spaced-Out/ui-design-system/issues/14)) ([08feede](https://github.com/Spaced-Out/ui-design-system/commit/08feede4f43b9cac046e49a5fff6f6929aab03c9))
+* **storybook:** [GDS-54] build and publish storybook to Github Pages ([#13](https://github.com/Spaced-Out/ui-design-system/issues/13)) ([93a4072](https://github.com/Spaced-Out/ui-design-system/commit/93a4072255f08ffd164b6076dd7f9edccf1a73ea))
+* textarea component ([#16](https://github.com/Spaced-Out/ui-design-system/issues/16)) ([d4f2d43](https://github.com/Spaced-Out/ui-design-system/commit/d4f2d434f54983adaad3686da869357f9a45c69a))
+* **toast:** [GDS-37] Toast and toast portal ([#29](https://github.com/Spaced-Out/ui-design-system/issues/29)) ([91e938b](https://github.com/Spaced-Out/ui-design-system/commit/91e938b9aa68845f5e806852dafd3d23260ddb8d))
+* **toggle:** [GDS-35] toggle component ([#18](https://github.com/Spaced-Out/ui-design-system/issues/18)) ([8434d96](https://github.com/Spaced-Out/ui-design-system/commit/8434d96142f8f1cad1d04d2b8b82784c5c5c4522))
+* tooltip and token stories ([#25](https://github.com/Spaced-Out/ui-design-system/issues/25)) ([8152db7](https://github.com/Spaced-Out/ui-design-system/commit/8152db76f6f284b0e8ad6acf70fea4f68993af07))
+* truncate type export ([#28](https://github.com/Spaced-Out/ui-design-system/issues/28)) ([9b6ff39](https://github.com/Spaced-Out/ui-design-system/commit/9b6ff39b7c648f083c2e0c4a9c50cc76928a4ebe))
+* typeahead component ([#23](https://github.com/Spaced-Out/ui-design-system/issues/23)) ([d7693bb](https://github.com/Spaced-Out/ui-design-system/commit/d7693bb832cb24e6eb01dbc109d4d2afb1b3d2e9))
+
+
+### Bug Fixes
+
+* added changelog in cspell ignore paths ([723f0d4](https://github.com/Spaced-Out/ui-design-system/commit/723f0d4c874c6558f96a5d78e464d3099e90c30d))
+* added chromatic ([1685380](https://github.com/Spaced-Out/ui-design-system/commit/16853800d7e7ce8610f94b937a4e61bc26537018))
+* added dislog ([e2967c1](https://github.com/Spaced-Out/ui-design-system/commit/e2967c1cf58778e1d6b492f5db9c4be9aaa0d0fc))
+* added Elevation stories ([f0d5a0d](https://github.com/Spaced-Out/ui-design-system/commit/f0d5a0d2723ab60abaeb9a7dc33b7fe4d1f9695e))
+* Added introduction page ([36eb7fd](https://github.com/Spaced-Out/ui-design-system/commit/36eb7fd4006c1a4ed7e0a440b9b1ef6216e09a7c))
+* added more stories ([234b4c9](https://github.com/Spaced-Out/ui-design-system/commit/234b4c95df349db07864a20c10e632c4388cba48))
+* added more text colors ([3ff7117](https://github.com/Spaced-Out/ui-design-system/commit/3ff7117bc0d9f1948765b1af1022a355a3cdbf7f))
+* added spell check ([1fa6f08](https://github.com/Spaced-Out/ui-design-system/commit/1fa6f0890f17ff288d66abcf63e7480ac5fd1730))
+* added spellcheck for storybook ([0c29edd](https://github.com/Spaced-Out/ui-design-system/commit/0c29edd6ca0f54e23bcafb79556b1af0bb486896))
+* added standard version ([5146c63](https://github.com/Spaced-Out/ui-design-system/commit/5146c632fcc7cb499697b0968d4b8a0e51594fec))
+* added test suite ([7676ca7](https://github.com/Spaced-Out/ui-design-system/commit/7676ca7c81efc942b8cbab4bead1fcf0bbdd715c))
+* added text counter for input ([#17](https://github.com/Spaced-Out/ui-design-system/issues/17)) ([09544d2](https://github.com/Spaced-Out/ui-design-system/commit/09544d212547c6574a39b762345fc2eb0eaddf11))
+* added yarn lock ([4052517](https://github.com/Spaced-Out/ui-design-system/commit/405251755d70d140c28fffbd138b2744f7ccb0cd))
+* backdrop fix ([e680a6a](https://github.com/Spaced-Out/ui-design-system/commit/e680a6ae18e598196fd3e5518294ea1e2fba2ccc))
+* color fix for panel ([5b9a9be](https://github.com/Spaced-Out/ui-design-system/commit/5b9a9be55d416129262f3f71a8fb805cbcfb288d))
+* Deleted publish script ([a11cb77](https://github.com/Spaced-Out/ui-design-system/commit/a11cb77cf9b93e248187ca9e6b2eccd73de1aecd))
+* design comments ([9718754](https://github.com/Spaced-Out/ui-design-system/commit/9718754b9a9293d5523f70bdc700e50503589866))
+* design qa fixes ([052058b](https://github.com/Spaced-Out/ui-design-system/commit/052058baf72206f2c04e551f8d1e538c74bb571e))
+* docs fix ([b001ed9](https://github.com/Spaced-Out/ui-design-system/commit/b001ed9613a2e5cd93dde72e81f4112114e30eff))
+* Fixed indentation for Design Tokens ([417934b](https://github.com/Spaced-Out/ui-design-system/commit/417934b5105a4377449870d95152392068fa49d8))
+* **icon:** icon center align ([#6](https://github.com/Spaced-Out/ui-design-system/issues/6)) ([f22ce7d](https://github.com/Spaced-Out/ui-design-system/commit/f22ce7d9eda9dfeaad7b15afd19c19f5e52a4d7e))
+* linear loader fluid width ([#24](https://github.com/Spaced-Out/ui-design-system/issues/24)) ([e943d5f](https://github.com/Spaced-Out/ui-design-system/commit/e943d5fcd56a3bf9a4edaf29ed624c8bce931fb1))
+* modal arch init ([71d8ce1](https://github.com/Spaced-Out/ui-design-system/commit/71d8ce1c42697cf3a3ba039d826db6fb672b5074))
+* panel footer fixes ([11be4d9](https://github.com/Spaced-Out/ui-design-system/commit/11be4d99f11fec1acb67fffebcb59ea128593530))
+* panel init ([5438d93](https://github.com/Spaced-Out/ui-design-system/commit/5438d9340f5796d5cc64902321ef9ee020738400))
+* renamed folder ([931f139](https://github.com/Spaced-Out/ui-design-system/commit/931f13928337cda26db94d21bb5c15c0e57669a6))
+* Selected option fix ([fac75f7](https://github.com/Spaced-Out/ui-design-system/commit/fac75f75588919903d85cfbe4f8df63f8826cb95))
+* spell checks everywhere ([f81b8d4](https://github.com/Spaced-Out/ui-design-system/commit/f81b8d4cdbe7eccdb8b9a626edf057f66cdfe3b4))
+* storybook upgrade ([78f0d84](https://github.com/Spaced-Out/ui-design-system/commit/78f0d84fd3ed73c0424f86c10c6b9100fbe7e18b))
+* tooltip fixes ([b8b0bd0](https://github.com/Spaced-Out/ui-design-system/commit/b8b0bd0514af32c4f31dab1dbea99e70d221d5b5))

package/README.md

@@ -0,0 +1,178 @@
+# Sense UI Component Library
+
+This Genesis design system is created using:
+
+- [Gulp](https://gulpjs.com/)
+- [CSS Modules](https://github.com/css-modules/css-modules)
+- [React](https://reactjs.org/)
+
+It also features:
+
+- [Style-Dictionary](https://www.style-dictionary-play.dev/) to help you create and style variables
+- [Storybook](https://storybook.js.org/) to help you create and show off your components
+- [Standard Version](https://github.com/conventional-changelog/standard-version) to manage changelog across releases
+
+### Commits
+
+Each commit should follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) guidelines
+
+Most commonly used commit prefixes:
+
+`fix:` a commit of the type fix patches a bug in your codebase (this correlates with [PATCH](https://semver.org/#summary) in Semantic Versioning)
+
+`feat:` a commit of the type feat introduces a new feature to the codebase (this correlates with [MINOR](https://semver.org/#summary) in Semantic Versioning)
+
+`refactor:` Commits, that rewrite/restructure your code, however does not change any behavior
+
+`style:` Commits, that do not affect the meaning (white-space, formatting, missing semi-colons, etc)
+
+`docs:` Commits, that affect documentation only
+
+`build:` Commits, that affect build components like build tool, ci pipeline, dependencies, project version, etc.
+
+### Building
+
+```
+yarn build
+```
+
+To Build the style variables using style-dictionary run
+
+```
+yarn build:style-variables
+```
+
+It would put all the style variables created inside the styles folder. Our yarn build hook would essentially copy these variables to the build output target.
+
+### Storybook
+
+To run a live-reload Storybook server on your local machine:
+
+```
+yarn storybook
+```
+
+To export your Storybook as static files:
+
+```
+yarn storybook:export
+```
+
+After merging PR in master, storybook gets updated at https://spaced-out.github.io/ui-design-system/
+
+### Generating New Components
+
+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:
+
+```
+yarn generate YourComponentName
+```
+
+This will generate:
+
+```
+/src
+  /components
+    /YourComponentName
+      YourComponentName.jsx
+      YourComponentName.stories.jsx
+      YourComponentName.module.css
+      YourComponentName.stories.module.css
+```
+
+The default templates for each file can be modified under `scripts/templates`.
+
+### Installing Sense UI Component Library in ui_server Locally
+
+In the `ui_design_system` directory's run:
+
+```
+  yarn build
+```
+
+In the `consumer's` directory's run:
+
+```
+  yarn add @spaced-out/ui-design-system@file:../../ui-design-system
+```
+
+This would copy the design system package to node modules locally and create an entry in the `consumer's` package.json
+
+```
+  ...
+  "dependencies": {
+    ...
+    "@spaced-out/ui-design-system": "file:../../ui_design_system",
+    ...
+  },
+  ...
+```
+
+which will install the local component library as a dependency in `consumer`.
+
+For every change in `ui_design_system` that you want to propagate to `consumer` run:
+
+in `ui_design_system`
+
+```
+  yarn build
+```
+
+in `consumer`
+
+```
+  yarn upgrade @spaced-out/ui-design-system@file:../../ui-design-system
+```
+
+## Publishing
+
+### Hosting via NPM
+
+First, make sure you have an NPM account and are [logged into NPM using the `npm login` command.](https://docs.npmjs.com/creating-a-new-npm-user-account)
+
+```
+yarn prepublishOnly
+yarn publish
+```
+
+## Usage
+
+Let's say you created a public NPM package called `@spaced-out/ui-design-system` with the `Button` component created in this repository.
+
+Usage of the component (after the library installed as a dependency into another project) will be:
+
+```JSX
+import React from "react";
+import { Button } from "@spaced-out/ui-design-system/lib/components/Button";
+
+const App = () => (
+  <div className="app-container">
+    <h1>Hello I'm consuming the component library</h1>
+    <Button>Hello world</Button>
+  </div>
+);
+
+export default App;
+```
+
+### Using Component Library Design Tokens
+
+Design tokens are exported `.css` and `.js`. You can consume them easily by
+
+CSS use:
+
+```CSS
+@value (size2) from '@spaced-out/ui-design-system/lib/styles/variables/_size.css';
+
+.example-container {
+    height: size2
+}
+```
+
+JS use:
+
+```JSX
+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";
+
+```

package/babel.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: [
+          'last 2 Chrome versions',
+          'last 2 Safari versions',
+          'last 2 Firefox versions',
+          'last 2 Edge versions',
+          'last 3 iOS Major versions',
+        ],
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-flow',
+  ],
+  plugins: ['macros'],
+};

package/config.js

@@ -0,0 +1,58 @@
+const StyleDictionary = require('style-dictionary');
+const tokens = require('./design-tokens');
+
+
+const customCssFormat = ({dictionary, file}) =>
+  `${dictionary.allTokens
+    .map((token) => `@value ${token.name}: ${token.value};\n`)
+    .join(`\n`)}`;
+
+const customJsFormat = ({dictionary, file}) =>
+  `${dictionary.allTokens
+    .map((token, idx) => {
+      let str = `export const ${token.name} = '${token.value}';\n`;
+      if (!idx) {
+        const addStr = `// @flow strict\n\n`;
+        str = addStr + str;
+      }
+      return str;
+    })
+    .join(`\n`)}`;
+
+module.exports = {
+  source: ['design-tokens/**/*.json'],
+  format: {
+    customCssFormat,
+    customJsFormat,
+  },
+  platforms: {
+    // Web output in css partialformat
+    'css/category': {
+      transforms: ['attribute/cti', 'name/cti/camel'],
+      buildPath: `src/styles/variables/`,
+      files: tokens.map((tokenCategory) => ({
+        destination: `_${tokenCategory}.css`,
+        format: `customCssFormat`,
+        filter: {
+          attributes: {
+            category: tokenCategory,
+          },
+        },
+      })),
+    },
+    js: {
+      transforms: ['attribute/cti', 'name/cti/camel'],
+      transformGroup: 'js',
+      buildPath: `src/styles/variables/`,
+      files: tokens.map((tokenCategory) => ({
+        destination: `_${tokenCategory}.js`,
+        format: `customJsFormat`,
+        filter: {
+          attributes: {
+            category: tokenCategory,
+          },
+        },
+      })),
+    },
+  },
+};

package/cspell.json

@@ -0,0 +1,26 @@
+{
+  "ignorePaths": [
+    "node_modules",
+    "src/assets",
+    "flow-typed",
+    "lib",
+    "storybook-static",
+    ".vscode",
+    "CHANGELOG.md"
+  ],
+  // Enable your dictionary by adding it to the list of `dictionaries`
+  "dictionaries": ["custom-words"],
+
+  // Tell CSpell about your dictionary
+  "dictionaryDefinitions": [
+    {
+      // The name of the dictionary is used to look it up.
+      "name": "custom-words",
+      // Path to the custom word file. Relative to this `cspell.json` file.
+      "path": "./.cspell/custom-words.txt",
+      // Some editor extensions will use `addWords` for adding words to your
+      // personal dictionary.
+      "addWords": true
+    }
+  ]
+}

package/design-tokens/border/app-border.json

@@ -0,0 +1,41 @@
+{
+  "border": {
+    "width": {
+      "none": {
+        "value": "{baseBorder.width.0.value}"
+      },
+      "primary": {
+        "value": "{baseBorder.width.1.value}"
+      },
+      "secondary": {
+        "value": "{baseBorder.width.1_5.value}"
+      },
+      "tertiary": {
+        "value": "{baseBorder.width.2.value}"
+      }
+    },
+    "radius": {
+      "none": {
+        "value": "{baseBorder.radius.0.value}"
+      },
+      "x-small": {
+        "value": "{baseBorder.radius.4.value}"
+      },
+      "radio-button": {
+        "value": "{baseBorder.radius.6.value}"
+      },
+      "small": {
+        "value": "{baseBorder.radius.8.value}"
+      },
+      "medium": {
+        "value": "{baseBorder.radius.12.value}"
+      },
+      "large": {
+        "value": "{baseBorder.radius.20.value}"
+      },
+      "circle": {
+        "value": "{baseBorder.radius.50%.value}"
+      }
+    }
+  }
+}

package/design-tokens/border/base-border.json

@@ -0,0 +1,41 @@
+{
+  "baseBorder": {
+    "radius": {
+      "0": {
+        "value": "0px"
+      },
+      "4": {
+        "value": "4px"
+      },
+      "6": {
+        "value": "6px"
+      },
+      "8": {
+        "value": "8px"
+      },
+      "12": {
+        "value": "12px"
+      },
+      "20": {
+        "value": "20px"
+      },
+      "50%": {
+        "value": "50%"
+      }
+    },
+    "width": {
+      "0": {
+        "value": "0px"
+      },
+      "1": {
+        "value": "1px"
+      },
+      "1_5": {
+        "value": "1.5px"
+      },
+      "2": {
+        "value": "2px"
+      }
+    }
+  }
+}