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

package/.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

package/.cspell/custom-words.txt

@@ -0,0 +1,22 @@
+atleast
+circlehollow
+commitlint
+DEFAULTTEXT
+dismissable
+Fennimore
+flowtype
+fontawesome
+Lipsey
+Neue
+Nishant
+OPACITYS
+partialformat
+rgba
+sbdocs
+testid
+tnum
+transclude
+Typeahead
+Verda
+xmark
+yxxx

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/.eslintignore

@@ -0,0 +1 @@
+/src/assets/fontawesome/

package/.eslintrc.yml

@@ -0,0 +1,122 @@
+{
+  'root': true,
+  'env': {'browser': true, 'node': true, 'es2020': true},
+  'parser': '@babel/eslint-parser',
+  'plugins':
+    ['flowtype', '@babel', 'react', 'import', 'unused-imports', 'react-hooks','simple-import-sort'],
+  'settings': {'react': {'version': 'detect'}},
+  'globals': {'Iterator': 'readonly'},
+  'rules':
+    {
+      'arrow-body-style': ['warn', 'as-needed'],
+      'curly': ['warn', 'all'],
+      comma-spacing: ["warn", { "before": false, "after": true }],
+      'eol-last': 'warn',
+      'eqeqeq': ['error', 'always', {'null': 'ignore'}],
+      indent: ["error", 2],
+      'max-params': ['warn', {'max': 4}],
+      'no-alert': 'warn',
+      'no-console': ['error', {allow: ['warn', 'error']}],
+
+      'no-const-assign': 'error',
+      'no-dupe-args': 'error',
+      'no-dupe-keys': 'error',
+      'no-duplicate-case': 'error',
+      'no-dupe-class-members': 'error',
+      'no-empty-function': 'warn',
+      'no-empty-pattern': 'error',
+      'no-eval': 'error',
+      'no-extend-native': 'error',
+      'no-extra-boolean-cast': 'error',
+      'no-fallthrough': 'error',
+      'no-floating-decimal': 'error',
+      'no-inner-declarations': 'error',
+      'no-loop-func': 'error',
+      'no-mixed-requires': 'off',
+      'no-nested-ternary': 'off',
+      'no-new-symbol': 'error',
+      'no-redeclare': 'error',
+      'no-restricted-globals': ['error', 'event', 'location'],
+      'no-sparse-arrays': 'error',
+      'no-tabs': 'warn',
+      'no-this-before-super': 'error',
+      'no-trailing-spaces': 'warn',
+      'no-underscore-dangle': 'off',
+      'no-unmodified-loop-condition': 'warn',
+      'no-undef': ['error', {'typeof': true}],
+      'no-unreachable': 'warn',
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars':
+        [
+          'warn',
+          {
+            'vars': 'all',
+            'varsIgnorePattern': '^_',
+            'args': 'after-used',
+            'argsIgnorePattern': '^_',
+          },
+        ],
+      'no-useless-constructor': 'error',
+      'no-var': 'error',
+      'no-with': 'error',
+      'object-shorthand': 'error',
+      'prefer-arrow-callback': 'error',
+      'prefer-const': 'warn',
+      'prefer-spread': 'warn',
+      'quotes': ['warn', 'single', {'allowTemplateLiterals': true}],
+      'require-yield': 'error',
+      'rest-spread-spacing': 'error',
+      'strict': ['warn', 'never'],
+
+      'import/newline-after-import': ['warn', {'count': 2}],
+      'import/no-duplicates': 'error',
+
+      'react/jsx-no-undef': 'error',
+      'react/jsx-pascal-case': 'warn',
+      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-vars': 'error',
+      'react/no-array-index-key': 'warn',
+      'react/no-deprecated': 'error',
+      'react/no-direct-mutation-state': 'error',
+      'react/no-string-refs': 'warn',
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 'error',
+
+      'flowtype/define-flow-type': 'error',
+      'flowtype/delimiter-dangle': ['warn', 'always-multiline'],
+      'flowtype/no-existential-type': 'warn',
+      'flowtype/no-weak-types': 'warn',
+      'flowtype/semi': ['warn', 'always'],
+
+      'react-hooks/rules-of-hooks': 'error',
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error"
+    },
+  'overrides':
+    [
+      {
+        'files': ['**/__tests__/*.js', '**/__tests__/*.jsx'],
+        'env': {'jest': true},
+        'plugins': ['jest'],
+      },
+      {'files': ['**/*.stories.jsx'], 'rules': {'semi': ['warn', 'always']}},
+      {
+        "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
+        "rules": {
+          "simple-import-sort/imports": [
+            "error",
+            {
+              "groups": [
+                ["^react", "^@?\\w"],
+                ["^(@|components)(/.*|$)"],
+                ["^\\u0000"],
+                ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+                ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+                ["^.+\\.?(css)$"]
+              ]
+            }
+          ]
+        }
+      }
+    ],
+}

package/.flowconfig

@@ -0,0 +1,45 @@
+[include]
+./node_modules/react
+
+[ignore]
+./node_modules/react/node_modules/.*
+.*/**/malformed_package_json/package.json
+./node_modules/systemjs-builder/.*
+./build/.*
+./lib/.*
+
+[declarations]
+
+[libs]
+./node_modules/fbjs/flow/lib
+
+[options]
+sharedmemory.hash_table_pow=21
+
+module.system.node.resolve_dirname=node_modules
+module.system.node.allow_root_relative=true
+
+module.name_mapper='^\(.*\)\.\(png\|jpg\|gif\|mp3\|wav\)$' -> '<PROJECT_ROOT>/flow/FileFlowStub.js.flow'
+module.name_mapper='^\(.*\)\.css$' -> '<PROJECT_ROOT>/flow/CSSFlowStub.js.flow'
+module.name_mapper='^\(.*\)\.svg$' -> '<PROJECT_ROOT>/flow/SVGFlowStub.js.flow'
+module.name_mapper='^\(.*\)\.svg\?noDimensions$' -> '<PROJECT_ROOT>/flow/SVGFlowStub.js.flow'
+module.name_mapper='^\(.*\)\.svg\?noAttrs$' -> '<PROJECT_ROOT>/flow/SVGFlowStub.js.flow'
+
+exact_by_default=true
+
+[strict]
+nonstrict-import
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
+deprecated-type
+unnecessary-invariant
+unnecessary-optional-chain
+
+[lints]
+deprecated-type=warn
+sketchy-number=error
+unclear-type=warn
+unnecessary-invariant=warn
+unnecessary-optional-chain=warn

package/.github/workflows/pages.yml

@@ -0,0 +1,52 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Publish Genesis Design System Storybook to Github Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install and Build 🔧
+        # Install npm packages and build the Storybook files
+        run: |
+          echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
+          yarn
+          yarn storybook:export
+      - name: List files in the repository after build
+        run: |
+          ls ${{ github.workspace }}
+          echo "🍏 This job's status is ${{ job.status }}."
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload storybook-static folder's content
+          path: './storybook-static/'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

package/.prettierrc

@@ -0,0 +1,11 @@
+trailingComma: 'all'
+bracketSpacing: false
+singleQuote: true
+endOfLine: lf
+overrides:
+  - files: ['*.js', '*.jsx']
+    options:
+      parser: 'babel-flow'
+  - files: ['*.css']
+    options:
+      parser: 'css'

package/.storybook/SenseTheme.js

@@ -0,0 +1,12 @@
+import {create} from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Genesis',
+  brandImage:
+    'https://assets-global.website-files.com/613f2494a7d5cd1817022b81/618cffd78219af09f95a7446_Group%204.svg',
+
+  fontBase: '"Centra No 2", "proxima-nova", "Helvetica Neue"',
+  textColor: '#17172A',
+  textInverseColor: '#ffffff',
+});

package/.storybook/main.js

@@ -0,0 +1,73 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.jsx'],
+  // Add any Storybook addons you want here: https://storybook.js.org/addons/
+  addons: [
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true,
+      },
+    },
+    'storybook-css-modules',
+    '@storybook/addon-a11y',
+    '@storybook/addon-essentials',
+    '@storybook/testing-react',
+    'storybook-vscode-component/register',
+  ],
+  webpackFinal: async (config) => {
+    config.module.rules = config.module.rules.map((rule) => {
+      if (rule.test && rule.test.toString().includes('woff')) {
+        return {
+          ...rule,
+          test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/,
+        };
+      }
+      return rule;
+    });
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    config.module.rules.push({
+      test: /\.(js|jsx)$/,
+      loader: require.resolve('babel-loader'),
+      options: {
+        presets: [['react-app', {flow: true, typescript: false}]],
+      },
+    });
+
+    // fonts
+    config.module.rules.push({
+      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+      use: [
+        {
+          loader: 'file-loader',
+          query: {
+            name: '[name].[ext]',
+          },
+        },
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+    config.resolve.extensions.push('.js', '.jsx');
+
+    return config;
+  },
+  staticDirs: ['public'],
+};

package/.storybook/manager-head.html

@@ -0,0 +1,41 @@
+<!--
+  Override the default favicon used in the Storybook in the browser tab.
+-->
+<link
+  rel="icon"
+  sizes="any"
+  href="https://spaced-out.github.io/ui-design-system/favicon.ico?"
+/>
+
+<style>
+  @font-face {
+    font-family: 'Centra No 2';
+    src: url('fonts/CentraNo2-Book.woff2') format('woff2'),
+      url('fonts/CentraNo2-Book.woff') format('woff');
+    font-weight: 300 400;
+    font-style: normal;
+    font-display: auto;
+  }
+
+  @font-face {
+    font-family: 'Centra No 2';
+    src: url('fonts/CentraNo2-BookItalic.woff2') format('woff2'),
+      url('fonts/CentraNo2-BookItalic.woff') format('woff');
+    font-weight: 300 400;
+    font-style: italic;
+    font-display: auto;
+  }
+
+  @font-face {
+    font-family: 'Centra No 2';
+    src: url('fonts/CentraNo2-Medium.woff2') format('woff2'),
+      url('fonts/CentraNo2-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: auto;
+  }
+  body {
+    /* This will target all of the children */
+    font-family: 'Centra No 2' !important;
+  }
+</style>

package/.storybook/manager.js

@@ -0,0 +1,14 @@
+// .storybook/manager.js
+
+import {addons} from '@storybook/addons';
+import {themes} from '@storybook/theming';
+
+import senseTheme from './SenseTheme';
+
+addons.setConfig({
+  theme: senseTheme,
+  previewTabs: {
+    canvas: {title: 'Playground'},
+    'storybook/docs/panel': {title: 'Documentation', index: -1},
+  },
+});

package/.storybook/preview-head.html

@@ -0,0 +1,130 @@
+<style type="text/css">
+  @font-face {
+    font-family: 'Centra No 2';
+    src: url('fonts/CentraNo2-Book.woff2') format('woff2'),
+      url('fonts/CentraNo2-Book.woff') format('woff');
+    font-weight: 300 400;
+    font-style: normal;
+    font-display: auto;
+  }
+
+  @font-face {
+    font-family: 'Centra No 2';
+    src: url('fonts/CentraNo2-BookItalic.woff2') format('woff2'),
+      url('fonts/CentraNo2-BookItalic.woff') format('woff');
+    font-weight: 300 400;
+    font-style: italic;
+    font-display: auto;
+  }
+
+  @font-face {
+    font-family: 'Centra No 2';
+    src: url('fonts/CentraNo2-Medium.woff2') format('woff2'),
+      url('fonts/CentraNo2-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: auto;
+  }
+
+  html,
+  body {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+    background: white;
+    color: #606060;
+    font-size: 16px;
+    text-size-adjust: none;
+    font-feature-settings: 'tnum';
+  }
+
+  html.fixed,
+  body.fixed {
+    overflow: hidden;
+  }
+
+  /* standard resets */
+  a {
+    text-decoration: none;
+    font-weight: inherit;
+    color: inherit;
+  }
+
+  button {
+    padding: 0;
+  }
+  input,
+  textarea,
+  button {
+    font: inherit;
+    font-size: inherit;
+    text-transform: inherit;
+    color: inherit;
+    outline: none;
+    background: transparent;
+    border: none;
+    margin: 0;
+  }
+
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+  }
+  div,
+  nav,
+  header,
+  footer,
+  section,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  ul,
+  ol,
+  figure,
+  figcaption,
+  form,
+  label,
+  ::before,
+  ::after {
+    margin: 0;
+  }
+
+  body {
+    font-family: 'Centra No 2';
+    background: #fafafa;
+  }
+
+  #root {
+    font-family: initial;
+  }
+
+  #docs-root {
+    font-family: 'Centra No 2';
+  }
+
+  [class*='sbdocs'] {
+    font-family: 'Centra No 2' !important;
+  }
+
+  [class*='docblock'] {
+    font-family: 'Centra No 2' !important;
+  }
+
+  #docs-root .sbdocs {
+    background: #fafafa !important;
+  }
+
+  #docs-root .sbdocs .docs-story {
+    font-family: initial !important;
+  }
+
+  #root,
+  #root div {
+    display: flex;
+  }
+</style>

package/.storybook/preview.js

@@ -0,0 +1,128 @@
+/**
+ * Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
+ * for more information about the purpose of this file.
+ *
+ * Use preview.js for global code (such as CSS imports or JavaScript mocks)
+ * that applies to all stories. For example, `import thirdPartyCss.css`.
+ *
+ * This file can have three exports:
+ * - decorators - an array of global decorators
+ * - parameters - an object of global parameters
+ * - globalTypes - definition of globalTypes
+ */
+
+/**
+ * Decorators
+ *
+ * A decorator is a way to wrap a story in extra “rendering” functionality.
+ *
+ * Example:
+ *
+ * import React from 'react';
+ * export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
+ *
+ * Each story throughout the library will be wrapped in a div with a margin of 3
+ */
+
+/**
+ * Parameters
+ *
+ * Most Storybook addons are configured via a parameter-based API.
+ * You can set global parameters in this file
+ **/
+
+import {themes} from '@storybook/theming';
+import {wd} from 'paths.macro';
+import {addParameters} from '@storybook/react';
+
+addParameters({
+  viewMode: 'docs',
+});
+
+export const parameters = {
+  backgrounds: {
+    values: [
+      {name: 'Dark', value: '#000'},
+      {name: 'Light', value: '#fff'},
+    ],
+  },
+  docs: {
+    theme: themes.light,
+  },
+  Canvas: {
+    theme: themes.light,
+  },
+  storySource: {
+    repository: 'https://github.com/Spaced-Out/ui-design-system',
+    workingDir: wd,
+    branch: 'master',
+  },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: [
+        'Introduction',
+        'Changelog',
+        'Design Tokens',
+        'Tokens',
+        'Components',
+        [
+          'Button',
+          'Icon',
+          'Search Input',
+          'Menu',
+          'Button Dropdown',
+          'Modal',
+          'Dialog',
+          'Panel',
+          'Tooltip',
+          'Linear Loader',
+          'Circular Loader',
+        ],
+        'Form Components',
+        [
+          'Input',
+          'Textarea',
+          'Checkbox',
+          'Checkbox Group',
+          'Radio Button',
+          'Radio Group',
+          'Toggle',
+          'Dropdown',
+          'Typeahead',
+        ],
+
+        '*',
+      ],
+      locales: 'en-US',
+    },
+  },
+};
+/**
+ * With backgrounds, you configure the list of backgrounds that every story can render in.
+ */
+
+/**
+ * Global Types
+ *
+ * Global Types allow you to add your own toolbars by creating
+ * globalTypes with a toolbar annotation:
+ *
+ * For example:
+ **/
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'dark',
+    toolbar: {
+      icon: 'circlehollow',
+      // array of plain string values or MenuItem shape
+      items: ['light', 'dark'],
+    },
+  },
+};
+/**
+ *
+ * Will add a new dropdown in your toolbar with options light and dark.
+ **/

package/.storybook/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg width="137" height="137" viewBox="0 0 137 137" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.5 76C56.7173 76 65 67.7173 65 57.5C65 47.2827 56.7173 39 46.5 39C36.2827 39 28 47.2827 28 57.5C28 67.7173 36.2827 76 46.5 76Z" fill="#FFD252"/>
+<path d="M90.5 47C100.717 47 109 38.4934 109 28C109 17.5066 100.717 9 90.5 9C80.2827 9 72 17.5066 72 28C72 38.4934 80.2827 47 90.5 47Z" fill="#F05A28"/>
+<path d="M46.5 128C56.7173 128 65 119.717 65 109.5C65 99.2827 56.7173 91 46.5 91C36.2827 91 28 99.2827 28 109.5C28 119.717 36.2827 128 46.5 128Z" fill="#7461E5"/>
+<path d="M90.5 98C100.717 98 109 89.9411 109 80C109 70.0589 100.717 62 90.5 62C80.2827 62 72 70.0589 72 80C72 89.9411 80.2827 98 90.5 98Z" fill="#33A30F"/>
+</svg>