Init

.editorconfig

@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+
+[*.txt]
+indent_style = tab
+indent_size = 4
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,115 @@
+const fs = require('fs');
+
+const path = require('path');
+
+const prettierOptions = JSON.parse(fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'));
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    extends: [
+        'airbnb-typescript',
+        'prettier',
+        'plugin:import/recommended',
+        'plugin:storybook/recommended',
+    ],
+    plugins: ['prettier', 'react', 'react-hooks', '@typescript-eslint', 'import'],
+    env: {
+        jest: true,
+        browser: true,
+        node: true,
+        es6: true,
+    },
+    parserOptions: {
+        ecmaVersion: 6,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true,
+        },
+        project: ['./tsconfig.eslint.json'],
+    },
+    rules: {
+        '@typescript-eslint/prefer-optional-chain': 2,
+        'jsx-no-lambda': 0,
+        semi: [2, 'always'],
+        '@typescript-eslint/interface-name-prefix': 0,
+        '@typescript-eslint/no-empty-interface': 0,
+        'object-shorthand': [0, 'never'],
+        quotes: [2, 'single'],
+        '@typescript-eslint/no-var-requires': 0,
+        'member-ordering': 0,
+        'object-literal-sort-keys': 0,
+        'no-shadowed-variable': 0,
+        'no-consecutive-blank-lines': 0,
+        'no-string-literal': 0,
+        'jsx-no-multiline-js': 0,
+        'jsx-boolean-value': 0,
+        'arrow-parens': 0,
+        'no-implicit-dependencies': 0,
+        'no-submodule-imports': 0,
+        'no-case-declarations': 1,
+        '@typescript-eslint/no-empty-function': 0,
+        '@typescript-eslint/ban-ts-comment': 1,
+        '@typescript-eslint/indent': 0,
+        'jsx-alignment': 0,
+        'jsx-wrap-multiline': 0,
+        'react/jsx-no-useless-fragment': 2,
+        '@typescript-eslint/camelcase': 0,
+        'prettier/prettier': [2, prettierOptions],
+        'arrow-body-style': [2, 'as-needed'],
+        'class-methods-use-this': 0,
+        'import/order': 0,
+        'import/imports-first': 0,
+        'import/newline-after-import': 0,
+        'import/no-dynamic-require': 0,
+        'import/no-extraneous-dependencies': 0,
+        'import/no-named-as-default': 0,
+        'import/no-unresolved': [
+            2,
+            {
+                caseSensitive: false,
+            },
+        ],
+        // ts already checks case sensitive imports
+        'import/no-webpack-loader-syntax': 0,
+        'import/prefer-default-export': 0,
+        'import/no-cycle': 1,
+        'no-param-reassign': 1,
+        'max-len': 0,
+        'newline-per-chained-call': 0,
+        'no-confusing-arrow': 0,
+        'no-console': 0,
+        'no-use-before-define': 0,
+        'prefer-template': 2,
+        'react/destructuring-assignment': 0,
+        'react-hooks/rules-of-hooks': 2,
+        'react/jsx-closing-tag-location': 0,
+        'react/forbid-prop-types': 0,
+        'react/jsx-first-prop-new-line': [2, 'multiline'],
+        'react/jsx-filename-extension': 0,
+        'react/jsx-no-target-blank': 0,
+        'react/jsx-props-no-spreading': 0,
+        'react/jsx-uses-vars': 2,
+        'react/prop-types': 0,
+        'react/require-default-props': 0,
+        'react/require-extension': 0,
+        'react/self-closing-comp': 0,
+        'react/sort-comp': 0,
+        'require-yield': 0,
+    },
+    settings: {
+        'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx'],
+        },
+        'import/resolver': {
+            typescript: {
+                alwaysTryTypes: true,
+                // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+                project: './tsconfig.json',
+            },
+            rollup: {
+                config: './rollup.config.js',
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            },
+        },
+        'import/ignore': ['types'], // Weirdly eslint cannot resolve exports in types folder (try removing this later)
+    },
+};

.gitignore

@@ -0,0 +1,19 @@
+# Dependency directories
+node_modules/
+
+# Build directory
+lib/
+lib-esm/
+dist/
+storybook-static/
+
+# Logs
+*.log
+npm-debug.log*
+
+#macOS custom attributes
+.DS_Store
+*/.DS_Store
+
+#editor configs
+.vscode

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

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

.nvmrc

@@ -0,0 +1 @@
+v14

.prettierignore

@@ -0,0 +1,15 @@
+# Dependency directories
+node_modules/
+
+# Build directory
+dist/
+lib/
+lib-esm/
+
+# Logs
+*.log
+npm-debug.log*
+
+#macOS custom attributes
+.DS_Store
+*/.DS_Store

.prettierrc

@@ -0,0 +1,9 @@
+{
+    "singleQuote": true,
+    "jsxSingleQuote": false,
+    "tabWidth": 4,
+    "printWidth": 100,
+    "trailingComma": "all",
+    "semi": true,
+    "exclude": ["node_modules"]
+}

.storybook/main.js

@@ -0,0 +1,16 @@
+const path = require('path');
+module.exports = {
+    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)', '../intro/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+    addons: ['@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-essentials'],
+    webpackFinal: async (config) => {
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@components': path.resolve(__dirname, '../src/components'),
+            '@hooks': path.resolve(__dirname, '../src/hooks'),
+            '@primitives': path.resolve(__dirname, '../src/primitives'),
+            '@types': path.resolve(__dirname, '../src/types'),
+            '@utils': path.resolve(__dirname, '../src/utils'),
+        };
+        return config;
+    },
+};

.storybook/manager-head.html

@@ -0,0 +1,58 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Questrial&family=Roboto:wght@500&display=swap" rel="stylesheet" />
+<link rel="icon" href="./icon.png" />
+<meta property="og:description" content="NeoPOP Design System by CRED" />
+<meta property="og:title" content="CRED Design System" />
+<title>NeoPOP Design System</title>
+<style>
+    body {
+        font-family: 'Roboto', sans-serif;
+    }
+
+    #storybook-explorer-searchfield {
+        border-radius: 0;
+        background: #0d0d0d;
+        margin-bottom: 15px;
+    }
+
+    #components, #foundation {
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 10px 0 0 20px;
+    }
+
+    .sidebar-subheading button {
+        color: #fff;
+        margin-bottom: 5px;
+    }
+
+    .sidebar-header div a img {
+        width: 30px;
+    }
+
+    #storybook-explorer-menu {
+        font-family: 'Questrial', sans-serif;
+        font-family: 'Roboto', sans-serif;
+        padding: 0 15px;
+    }
+
+    #storybook-explorer-menu a[data-selected="true"],
+    #storybook-explorer-menu a[data-selected="true"]:hover {
+        background-color: #fff;
+        color: #0d0d0d;
+    }
+
+    #storybook-explorer-menu svg {
+        color: #fff;
+        margin-top: 1.5px;
+    }
+
+    #storybook-explorer-menu a[data-selected="true"] svg {
+        color: #0d0d0d;
+        margin-top: 1.5px;
+    }
+
+    #storybook-explorer-menu button, a {
+        margin-top: 4px;
+    }
+</style>

.storybook/manager.js

@@ -0,0 +1,32 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
+import Logo from './images/logo.png';
+
+const theme =  create({
+    base: 'dark',
+
+    appBg: '#161616',
+    appContentBg: '#0d0d0d',  //TBD
+    appBorderRadius: 0,
+    textColor: 'rgba(255,255,255,0.9)', //TBD
+
+    colorPrimary: '#fff',
+    colorSecondary: '#fff', // TBD icon and highlight
+    textInverseColor: '#1b1b1b',
+
+    barBg: '#0d0d0d',
+    barTextColor: '#d2d2d2',
+    barSelectedColor: '#fbfbfb',
+
+    inputTextColor: '#fff',
+    inputBg: '#161616',
+    inputBorderRadius: 0,
+
+    brandTitle: 'CRED',
+    brandUrl: 'https://cred.club',
+    brandImage: Logo,
+});
+
+addons.setConfig({
+    theme,
+});

.storybook/preview.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { addParameters } from '@storybook/react';
+import { DocsPage } from '@storybook/addon-docs';
+import prettier from 'prettier/standalone';
+import prettierBabel from 'prettier/parser-babel';
+
+// Global decorator to apply the styles to all stories
+export const decorators = [
+    (Story) => (
+            <Story />
+    ),
+];
+
+// Custom Viewport for better looking
+const CUSTOM_VIEWPORTS = {
+    iphoneX: {
+        name: 'iPhone X',
+        styles: {
+            width: '375px',
+            height: '812px',
+        },
+    },
+    ...INITIAL_VIEWPORTS,
+};
+
+addParameters({
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    viewport: {
+        viewports: CUSTOM_VIEWPORTS,
+        defaultViewport: 'iphoneX',
+    },
+    viewMode: 'docs',
+    page: DocsPage,
+    previewTabs: {
+        'storybook/docs/panel': {
+            index: -1,
+        },
+        canvas: { title: 'Playground' },
+    },
+    options: {
+        storySort: {
+            order: [
+                'Introduction',
+                'Foundation',
+                ['Colors', 'Typography', 'Layout', 'Miscellaneous', 'Customisation'],
+                'Components',
+            ],
+        },
+    },
+});
+
+export const parameters = {
+    docs: {
+        transformSource: (input) =>
+            prettier.format(input, {
+                parser: 'babel',
+                plugins: [prettierBabel],
+            }),
+    },
+};