@pautena/react-design-system 0.0.1

package/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint"],
+  rules: {
+    "prettier/prettier": "error",
+    "react/display-name": "off",
+  },
+};

package/.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: 'ci'
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/cache@v2
+        with:
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            '**/node_modules'
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-      
+      - run: yarn
+      - run: yarn lint
+      - run: yarn test

package/.github/workflows/deploy-storybook.yaml

@@ -0,0 +1,23 @@
+name: 'Deploy Storybook'
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - run: yarn
+      - run: yarn storybook:build
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

package/.github/workflows/publish.yml

@@ -0,0 +1,31 @@
+name: Publish to NPM
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - uses: actions/cache@v2
+        with:
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            '**/node_modules'
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn- 
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: yarn install
+      - name: Build
+        run: yarn  build
+      - name: Publish package on NPM
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint
+yarn test

package/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+storybook-static
+coverage
+dist

package/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  trailingComma: "all",
+};

package/.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-knobs",
+  ],
+  framework: "@storybook/react",
+};

package/.storybook/preview.js

@@ -0,0 +1,36 @@
+import { ThemeProvider, CssBaseline, createTheme } from "@mui/material";
+import { addDecorator } from "@storybook/react";
+import { Box } from "@mui/material";
+import { select, withKnobs } from "@storybook/addon-knobs";
+
+const light = createTheme();
+const dark = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
+const themes = { light, dark };
+const themeNames = Object.keys(themes);
+
+addDecorator((Story) => {
+  const theme = select("Theme", themeNames, themeNames[0], "Themes");
+
+  return (
+    <ThemeProvider theme={themes[theme]}>
+      <CssBaseline />
+      <Story />
+    </ThemeProvider>
+  );
+});
+addDecorator(withKnobs);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

package/README.md

@@ -0,0 +1,7 @@
+# React Design System
+
+My custom design system on top of [MUI](https://mui.com/material-ui/), with a bunch of components to be able to fast prototype new pages and products
+
+## Storybook
+
+Use Storybook to navigate and interact with the available components. Available [here](https://pautena.com/react-design-system)

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+};