Merge pull request #162 from ooni/dev

Design system improvements

.babelrc

@@ -1,7 +1,3 @@
 {
-  "plugins": [
-    ["styled-components", {"ssr": true, "displayName": true, "preprocess": false}],
-    "inline-react-svg"
-  ],
-  "presets": ["@babel/preset-env", "@babel/react"]
-}
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
+}

.eslintignore

@@ -0,0 +1,5 @@
+src/components/icons/*
+src/animations/*
+src/bin/create-icons.js
+jest.config.js
+rollup.config.js

.eslintrc.json

@@ -1,37 +1,32 @@
 {
-  "settings": {
-    "react": {
-      "version": "16.4"
-    }
-  },
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
+    "airbnb",
+    "airbnb/hooks",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:react/jsx-runtime"
+  ],
+  "plugins": [
+    "@typescript-eslint", "react", "prettier"
   ],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,
       "jsx": true
     },
-    "ecmaVersion": "2017",
-    "sourceType": "module"
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
   },
-  "plugins": [
-    "react"
-  ],
+  "ignorePatterns": ["*.svg", "*.ttf", "*.woff", "*.eot", "*.md"],
   "rules": {
-    "indent": [
-      "error",
-      2
-    ],
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
     "quotes": [
       "error",
       "single"
@@ -40,6 +35,36 @@
       "error",
       "never"
     ],
-    "react/prop-types": ["warn"]
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "endOfLine": "auto",
+        "arrowParens": "always"
+      }
+    ],
+    "react/prop-types": ["warn"],
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "no-console": "warn",
+    "import/no-unresolved": 0,
+    "react/jsx-filename-extension": [1, {
+      "extensions": [
+        ".ts",
+        ".tsx"
+      ]
+    }],
+    "import/extensions": ["error", "never", {"svg": "always", "ts": "always", "tsx": "always", "json": "always"}],
+    "no-use-before-define": ["error", { "variables": false }],
+    "@typescript-eslint/no-use-before-define": ["error", { "variables": false }],
+    "no-empty-function": "warn",
+    "@typescript-eslint/no-empty-function": ["warn"],
+    "dot-notation": "warn",
+    "react/jsx-props-no-spreading": "off",
+    "import/no-extraneous-dependencies": "off",
+    "react/no-array-index-key": "off",
+    "react/function-component-definition": "off",
+    "react/default-props-match-prop-types": "off"
   }
 }

.gitignore

@@ -4,3 +4,9 @@ node_modules/
 package-lock.json
 /dist
 yarn-error.log
+.vscode
+*.tgz
+stats.html
+index.d.ts
+icons/index.d.ts
+storybook-static

.prettierignore

@@ -0,0 +1 @@
+ChangeLog.md

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "endOfLine": "auto",
+  "arrowParens": "always",
+  "semi": false
+}

.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: '@storybook/react',
+  babel: async options => {
+    options.plugins.push('babel-plugin-inline-react-svg')
+    return options
+  },
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

ChangeLog.md

@@ -1,5 +1,77 @@
 # ChangeLog
 
+## ooni-components 0.5.0-alpha.6 [2022-09-09]
+
+Changes:
+
+* Visual changes in Twitter share button.
+
+## ooni-components 0.5.0-alpha.5 [2022-08-26]
+
+Changes:
+
+* Props adjustment for `Modal` component.
+* `borderRadius={20}` won't work for `Modal` component. Correct way to add border radius is through `sx`. \
+  Example - `sx={{ borderRadius: 20 }}`
+* Increased the `Modal` close icon size
+
+## ooni-components 0.5.0-alpha.4 [2022-08-24]
+
+Changes:
+
+* Resolved `Modal` component CSS bugs
+
+## ooni-components 0.5.0-alpha.3 [2022-08-12]
+
+Changes:
+
+* New component added - `Textarea`
+
+Breaking changes:
+
+* `Input` component has been separated out into `Input` and `Textarea` components. The `type="textarea"` and `rows` props won't work anymore.
+* Replace `<Input type="textarea" />` with `<Textarea />`
+
+## ooni-components 0.5.0-alpha.2 [2022-07-27]
+
+Changes:
+
+* `icons` have been migrated to a private module
+
+Breaking changes:
+
+* Import statement of `icons` have been changed. The working one is `"ooni-components/icons"`.
+
+## ooni-components 0.5.0-alpha.1 [2022-07-25]
+
+* Identical to `v0.5.0-alpha.0`
+
+## ooni-components 0.5.0-alpha.0 [2022-07-25]
+
+Adds:
+
+* Rollup bundler to the applicaton
+* Typescript support - `v4.7.4`
+* Styleguide and Eslint support
+
+Changes:
+
+* All components have been migrated to Typescript
+* New unit testing with @testing-library/react
+* Storybook in a more structured way
+
+Breaking changes:
+
+* Import statement of `svgs` and `animations` have been changed. \
+  The working ones are `"ooni-components/svgs/logos/abc.svg"` and `"ooni-components/animations/abc.json"`
+* Uninstall `rebass` and `@rebass/forms` from the deps as it's coming from design-system and might break things due to version conflicts.
+
+Dependency changes:
+
+* Storybook upgraded from `v5.x.x` to `v6.x.x`
+* `@rebass/preset`, `emotion-theming`, `palx`, `prop-types`, `react`, `react-dom`, `react-icons`, `styled-components`, `styled-system`, `victory` have been removed from the **dependencies**
+* `@rebass/forms`, `react`, `react-dom`, `rebass`, `styled-components` have been added as **peer-dependencies**
+
 ## ooni-components 0.4.6 [2021-04-08]
 Fixes:
 * Remove default outline around buttons
@@ -315,4 +387,4 @@ Adds:
 
 * Basic color scheme
 * Rebass theme
-* Victory theme
+* Victory theme