Fresco

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining"
+  ]
+}

.eslintrc

@@ -1,31 +1,63 @@
 {
-    "extends": "airbnb",
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es6": true,
-        "node": true
+  "extends": "airbnb",
+  "env": {
+    "browser": true,
+    "commonjs": false,
+    "es6": true,
+    "node": false
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true,
+      "spread": true,
+      "experimentalObjectRestSpread": true,
+      "object-shorthand": [
+        "error",
+        "always"
+      ]
     },
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-        "ecmaVersion": 7,
-        "ecmaFeatures": {
-            "jsx": true,
-            "spread": true,
-            "experimentalObjectRestSpread": true,
-            "object-shorthand": ["error", "always"]
-        },
-        "sourceType": "module"
+    "sourceType": "module"
+  },
+  "plugins": [
+    "import",
+    "react"
+  ],
+  "rules": {
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ],
+    "react/forbid-prop-types": "off",
+    "react/no-array-index-key": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-named-as-default": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "no-mixed-operators": [
+      1,
+      {
+        "allowSamePrecedence": true
+      }
+    ]
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
     },
-    "plugins": ["react"],
-    "rules": {
-      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-      "react/forbid-prop-types": "off",
-      "react/no-array-index-key": "off",
-      "jsx-a11y/no-static-element-interactions": "off",
-      "import/no-extraneous-dependencies": "off",
-      "import/no-named-as-default": "off",
-      "jsx-a11y/click-events-have-key-events": "off",
-      "no-mixed-operators": [1, {"allowSamePrecedence": true}]
+    "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`
+      }
     }
+  }
 }

.github/workflows/CI.yml

@@ -0,0 +1,50 @@
+name: CI
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  preflight:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # Set node version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.12.1'
+
+      # Cache node_modules
+      - uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install node modules
+        run: npm ci
+
+      - name: Preflight
+        run: npm run preflight
+  publish:
+    needs: [preflight]
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+      # Setup .npmrc file to publish to GitHub Packages
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.12.1'
+      - run: npm ci
+      - run: npm run build
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_AUTH_TOKEN }}
+

.github/workflows/storybook.yml

@@ -0,0 +1,22 @@
+name: Storybook
+on:
+  push:
+    branches:
+      - main # if any push happens on branch `main`, run this workflow. You could also add `paths` to detect changes in specific folder
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install and Build
+        run: |
+          npm ci
+          npm run build-storybook
+
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: docs-build # output folder from `npm run build-storybook`

.gitignore

@@ -2,4 +2,5 @@
 /node_modules
 npm-debug.log*
 /lib
-.vscode
+/docs-build
+.vscode

.node-version

@@ -0,0 +1 @@
+18.12.1

.npmignore

@@ -0,0 +1,6 @@
+.DS_STORE
+/node_modules
+/stories
+/docs-build
+npm-debug.log*
+.vscode

.nvmrc

@@ -0,0 +1 @@
+18.12.1

.sass-lint.yml

@@ -1,7 +1,7 @@
 options:
   formatter: stylish
 files:
-  include: 'styles/**/*.s+(a|c)ss'
+  include: 'src/styles/**/*.s+(a|c)ss'
 rules:
   # Extends
   extends-before-mixins: 1

.storybook/main.js

@@ -2,23 +2,20 @@ const path = require('path');
 
 module.exports = {
   stories: ['../stories/**/*.stories.js'],
+  framework: "@storybook/react",
+  core: {
+    builder: 'webpack5',
+  },
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-links',
+    {
+      name: 'storybook-addon-sass-postcss',
+      options: {
+        rule: {
+          test: /\.(scss|sass)$/i,
+        },
+      },
+    }
   ],
-  webpackFinal: async (config, { configType }) => {
-    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-    // You can change the configuration based on that.
-    // 'PRODUCTION' is used when building the static version of storybook.
-
-    // Make whatever fine-grained changes you need
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../'),
-    });
-
-    // Return the altered config
-    return config;
-  },
 };