@indico-data/design-system 1.0.1

package/.babelrc

@@ -0,0 +1,27 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": "100"
+        }
+      }
+    ],
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "babel-plugin-styled-components",
+      {
+        "ssr": false
+      }
+    ]
+  ]
+}

package/.eslintignore

@@ -0,0 +1,6 @@
+node_modules/
+build/
+dist/
+webpack.config.js
+jest.config.js
+scripts/

package/.eslintrc.js

@@ -0,0 +1,63 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'react'],
+  rules: {
+    'no-debugger': 'error',
+    'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'off',
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+    'react/no-unescaped-entities': 'off',
+    'react/no-string-refs': 'off',
+    semi: 'warn',
+    'no-unused-expressions': 'off',
+    eqeqeq: ['error', 'always'],
+    'prefer-const': 'warn',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { args: 'after-used', argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'max-len': [
+      'warn',
+      {
+        code: 100,
+        ignoreComments: true,
+        ignoreTrailingComments: true,
+        ignoreUrls: true,
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+      },
+    ],
+  },
+};

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "semi": true
+}

package/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "yarn storybook"
+}

package/.storybook/indico-data-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 73" height="107.499999" width="300"><title>Indico Data</title><path d="M115 71.5h-8.7V50.3h8.7c5.9 0 10.6 4.8 10.6 10.6s-4.7 10.6-10.6 10.6zm-3.9-4.8h3.9c3.2 0 5.8-2.6 5.8-5.8s-2.6-5.8-5.8-5.8h-3.9v11.6zM173 50.3h-16.5v4.5h5.8v16.8h4.8V54.7h5.8l.1-4.4zm-34.3 0L131 71.5h5.1l1.3-3.5h8.3l1.3 3.5h5.1l-7.7-21.2h-5.7zm.3 13.2l2.5-7 2.5 7h-5zm46.6-13.2l-7.7 21.2h5.1l1.3-3.5h8.3l1.3 3.5h5.1l-7.7-21.2h-5.7zm.3 13.2l2.5-7 2.5 7h-5z" fill="#000"></path><path d="M9.3 1.4v41.3H1V1.4h8.3zm133.2 41.5c5.6 0 10.9-2.2 14.8-6.2l-5.9-5.9c-2.4 2.4-5.6 3.7-9 3.7s-6.5-1.3-8.9-3.7-3.7-5.5-3.7-8.9 1.3-6.6 3.7-9c4.9-4.9 13-5 17.9-.1l5.9-5.9c-8-8-21.3-7.9-29.5.3-4 4-6.2 9.2-6.2 14.8s2.2 10.9 6.1 14.8c3.9 4 9.2 6.1 14.8 6.1zM100.3 22c0-11.4-9.3-20.6-20.7-20.6H62.9v41.2h16.8c11.3 0 20.6-9.3 20.6-20.6zM71.2 9.7h8.4C86.4 9.7 92 15.2 92 22s-5.5 12.3-12.3 12.3h-8.4l-.1-24.6zm112.1 9.2h-6.2v6.2h6.2v-6.2zm-77 6.2v17.5h8.3V25.1h-8.3zm8.4-6.2V1.4h-8.3V19h8.3v-.1zm53.2 0c1.4-5.5 6.4-9.5 12.3-9.5s10.9 4.1 12.3 9.5h8.5C199.5 8.8 190.7 1 180.2 1s-19.3 7.8-20.8 17.9h8.5zm24.6 6.2c-1.4 5.4-6.4 9.5-12.3 9.5s-10.9-4-12.3-9.5h-8.5c1.5 10.1 10.3 17.8 20.8 17.8s19.3-7.8 20.8-17.8h-8.5zM46.3 1.4v28.1L26.7 1.4h-9.2v41.3h8.3v-28l19.5 28h9.3V1.4h-8.3z" fill="#0070f5"></path></svg>

package/.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
+    '@storybook/addon-a11y',
+    '@storybook/addon-styling',
+    '@storybook/addon-docs',
+  ],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
+    return config;
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,19 @@
+<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet" />
+
+<style>
+  button[title='Zoom in'],
+  button[title='Zoom out'],
+  button[title='Reset zoom'] {
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0.75em 1em;
+  }
+
+  input[type='number'] {
+    background-color: revert;
+  }
+
+  .sbdocs.sbdocs-content {
+    max-width: 1200px;
+  }
+</style>

package/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react';
+
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { GlobalStyles } from '../src/styles/globals';
+
+export const decorators = [
+  withThemeFromJSXProvider({
+    GlobalStyles, // Adds your GlobalStyle component to all stories
+  }),
+];
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/themes.js

@@ -0,0 +1,24 @@
+import { create } from '@storybook/theming/create';
+
+import indicoDataLogo from './indico-data-logo.svg';
+
+export const lightTheme = create({
+  // UI
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: 'Noto Sans, Avenir Next, Avenir, Noto, sans-serif',
+  fontCode: 'monospace',
+
+  // Form colors
+  inputBorderRadius: 4,
+
+  brandTitle: 'indico',
+  brandUrl: 'indicodata.ai',
+
+  base: 'light',
+
+  appBg: 'rgba(132,152,182,0.2)',
+
+  brandImage: indicoDataLogo,
+});