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],
+ }),
+ },
+};