DEV Community: Olek

SupabaseJS and select join with count

Olek — Sun, 14 Jan 2024 01:01:16 +0000

Hi, if you are looking for how to get count of the second select in supabase this is your post :)

return supabase
  .from('game')
  .select(`
    id,
    name,
    users(count)
  `)
  .eq('id', id)
  .then(({data, error}) => {
    if (error) {
      return Promise.reject(error.message);
    }

    return Promise.resolve({
      id: data[0].id,
      name: data[0].name,
      usersCount: data[0].users[0].count
    });
  });

Have fun!

UI Visual testing with Storybook and Chromatic

Olek — Wed, 15 Dec 2021 10:50:18 +0000

Hi everybody, today we are going to mess up with Storybook and UI visual testing, which in this case will be Chromatic.

Summary of what we are going to do:

Use an existing repository with already added storybook and atleast one React component and couple of stories.
Integrate the repository with visual testing.
Create a GitHub action for automate workflow.

If you have a repository with Storybook you can use it, if not you can create one, or fork or copy the one I'm using in this post.
https://github.com/ozaytsev86/visual-testing
Just one thing, if you are going to use a forked repo then you will have to change one thing, please check: https://www.chromatic.com/docs/github-actions#forked-repositories

Let's start

Once you signup in https://www.chromatic.com/ go to "Projects" and add a new one by clicking on the "Add project" blue button, then "Choose from GitHub" and select your project.

Now on the left side menu go to "Manage" section and copy token number to clipboard. Then go to your GitHub repository -> Settings -> Secrets and create a new secret CHROMATIC_PROJECT_TOKEN with the token value.

In the root of your project create a folder .github/workflows with chromatic.yml file.

name: Deploy to Chromatic

on: push

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Install dependencies
        run: yarn
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

Basically this action, on push, will trigger a deploy of our Storybook to Chromatic. So let's do a commit and push on our main branch.

Check the Actions tab that Deploy to Chromatic action was triggered and then go to your Chromatic profile and from the left side menu select "Setup", you should see that your project is connected with your repository.

Now change the style or something visually remarkable and do a push again. Go back to Chromatic profile and you will see something like this:

Click next, next, next... till you get to this screen:

Here you can check the changes. You or anyone of your team can review it and accept or deny.
Great, sounds good! We are almost done!

Let's do some improvements

Now we are going to trigger everything on pull request create instead of on push.

Go to Chromatic and click on "PRs" on the left side menu. You will see something like this:

Click "Install Chromatic on GitHub" to give permissions, it will request your GitHub's password and at the next screen add the repository we are working on (it could be already added) and click "Approve and Install".

Now let's modify our action to run on pull request instead of on push, so we will save some time and resources ;)

Create a new branch

Update chromatic.yml and replace

on: push

with

on:
  pull_request:
      branches:
        - main

And do some visually remarkable changes in your component, push the changes and create a pull request to your main branch and see the magic happen :)

In the pull request you will see the status of Chromatic deploy

If you click on "Details" you will see the progress and at "Publish to Chromatic" log section you will find a link to your Storybook if you wanna share it with someone.

Once deployed, you will see statuses of UI Review.
Now play around with the Chromatic's interface, check the build, check the changes, accept or deny and the status will be updated in your GitHubs pull request. Once you finish with the build go back to PRs page and mark pull request as approved.

And here we are, all our statuses in the GitHub's pull request are green, so it is ready to be merged.

That's it! Happy coding!

Jest SyntaxError: Unexpected token 'export'

Olek — Wed, 23 Dec 2020 10:45:18 +0000

In this post, I'm not going to explain how to configure react-testing-library and Jest, there is a lot of useful information about it. This time I'm going to talk about a specific error: SyntaxError: Unexpected token 'export'.

I spent 2 days trying to figure out what was causing the error as my configuration was working fine and I could test some simple components until I tried to test a component which is using an external dependency, in my case react-day-picker.

// MyCoolComponent.jsx

import 'react-day-picker/lib/style.css';

import React, {useState} from 'react';
import PropTypes from 'prop-types';

import AsyncSelect from 'react-select/async/dist/react-select.esm';
import DayPicker, {DateUtils} from 'react-day-picker';
import MomentLocaleUtils from 'react-day-picker/moment';
...
// the rest of the component's code

The component works fine with this imports

import AsyncSelect from 'react-select/async/dist/react-select.esm';
import DayPicker, {DateUtils} from 'react-day-picker';
import MomentLocaleUtils from 'react-day-picker/moment';

but Jest doesn't like it and throws a SyntaxError: Unexpected token 'export'

I tried different things, like play around with .babelrc and some dependencies, moduleNameMapper and transformIgnorePatterns in jest.config.js, and the last one was close but I was still missing one important thing... the imports.

So the final fix was:

Update the imports

import AsyncSelect from 'react-select';
import DayPicker, {DateUtils, LocaleUtils} from 'react-day-picker';

Add those dependencies to transformIgnorePatterns in jest.config.js

...
transformIgnorePatterns: [
  '/node_modules/(?!react-select)',
  '/node_modules/(?!react-day-picker)',
],
...

Probably it was caused by hurrying up writing a component and autocompleting an import with an IDE help. For Webpack it is fine because it passes all the code through Babel, links all dependencies, and transpile them to vanilla js which in Jest's case isn't.

I still have doubts about, drop me a comment, and let's discuss it :)

Happy coding, thanks for reading.

Thanks @kazukyakayashi for the picture.

Storybook v6 zero-config for custom Webpack configuration

Olek — Tue, 03 Nov 2020 16:17:54 +0000

Hi everybody, this article is for those who are using a custom Webpack configuration to compile Storybook 6 and want to generate component's documentation automatically.

After the migration of Storybook v5.3 to Storybook v6 (Check the guide) I started the investigation of new features which are awesome. The coolest one from my point of view is @storybook/addon-essentials which adds a viewport button and support for an auto-documentation generation among other things.

In case you haven't read the article I mentioned before, I have a custom Webpack configuration which has taken me to the problem I got with the zero-config.

Let's start, our current configuration is:

// .storybook/main.js
const custom = require('./webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules, // babel, sass, fonts and images loaders
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve, // custom imports resolvers
      }
    };
  },
};

Now we need to install a couple of packages:

@storybook/addon-essentials - cool storybook's addons collection
babel-plugin-react-docgen - allows us to write a propType and component documentation

Run yarn add -D @storybook/addon-essentials babel-plugin-react-docgen.
Update your Storybook config file to:

// .storybook/main.js
const custom = require('./webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: [
    '@storybook/addon-essentials',
  ],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules,
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve,
      }
    };
  },
};

Update your .babelrc config to:

{
  "presets": [
    [
      "@babel/preset-env",
      {"modules": "commonjs"}
    ],
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining",
    "react-docgen"
  ]
}

Super easy when you know what you have to do. I decided to publish it because in my case I spent an entire afternoon looking for a solution and trying a lot of things which had no success. Then I used @storybook/preset-create-react-app which worked but I wanted to make it work with my own Webpack config, so a few days after I back to business and made it work.

Hope this article helps you, happy coding, and never give up 💪
Thanks for reading, comments are welcome :)

Thanks Michail Vasilyev for the picture.

How I migrated React Storybook from v5.3 to v6

Olek — Tue, 22 Sep 2020 16:33:38 +0000

If you get to this article its because you are already familiar with Storybook and you want to move forward to the new and cool stuff :).
I will give you my simple old configuration and tell you my adventure of updating from v5.3 to v6.

Note: I think it should work for v5 also as I didn't change my Storybook config on updates to v5.3.

Well, my configuration for the v5.3 was:

// .storybook/config.js

import {addParameters} from '@storybook/react';
import '../src/styles/App.scss'; // all my app styles because I don't import them in each component
import './styles.scss'; // with some overrided styles for Storyb
import theme from './theme';

addParameters({
  options: {theme}
});

// .storybook/main.js

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
};

// .storybook/theme.js

import {create} from '@storybook/theming';
import gigedsLogo from '../src/statics/logo.png';

export default create({
  base: 'light',
  brandTitle: 'Gigeds',
  brandImage: gigedsLogo,
  colorSecondary: '#de2020'
});

// .storybook/webpack.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.(jpg|jpeg|png|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 1000000,
              name: `statics/images/[name].[ext]`,
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 10000,
          name: `statics/fonts/[name].[ext]`,
        },
      },
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.css', '.scss'],
    modules: [resolve('../node_modules')],
    alias: {
      components: resolve('../src/components'),
      views: resolve('../src/views'),
      statics: resolve('../src/statics'),
    },
  },
};

As you can see the configuration is very simple, without plugins and with some changes in the theme and custom Webpack configuration.
Imagine you have your Storybook working fine and you just updated it from v5.3 to v6, then run a script yarn sb (in your case could be yarn storybook) to check if everything works as expected... compiling... and BAM!

ERR! Error: You have both a "main" and a "config". Please remove the "config" file from your configDir

Hm... if I remove my config I need to load my styles and my custom theme somewhere 😕. Well, let's remove our config.js and go to the documentation to see how to fix it.
Let's go to theme configuration documentation. Bingo! Install a couple of new packages yarn add --dev @storybook/addons @storybook/theming
Then create ./manager.js to load your custom theme 💪

// ./manager.js
@see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

NOTE: at the beginning I just copied and pasted all the stuff I had in my ./config.js and then ran yarn sb and got an error:

ERROR in ./src/styles/App.scss 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

It was because I was importing App.scss file which is not needed anymore in v6.

So, here we go again, run yarn sb and...😏 BAM! Bloody terminal😨

A lot of errors, one per `.jsx` file which has `.scss` import.

My thought was to add webpack config somewhere. After a nice while of diving in the documentation I found custom webpack configuration which is pretty clear, but then I got a doubt to where to load all the stories, and the documentation doesn't mention anything about stories loading + webpack config at the same time. They are always treated separately. So I just added them in the same module.

// ./main.js

const custom = require('./webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules,
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve,
      }
    };
  },
};

Then run yarn sb and... BOOM? (BAM! = bad, BOOM! = cool) The browser opened, Storybook loading... loading... loading... 😕 we are still missing something... Let's check the terminal. Oh! A lot of warnings (one per component):

...
WARNING in ./src/components/alert/Alert.stories.js 10:4
Module parse failed: Unexpected token (10:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...

Seems like babel-loader is missing in our webpack config, which in my case with Storybook v5.3 was not needed, so let's add it.

// .storybook/webpack.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  module: {
    rules: [
      ...
      {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: [
           'babel-loader',
             {
               loader: 'eslint-loader',
               options: {
                 cache: true,
                 emitWarning: true,
               },
             },
         ],
      },
...

Now again run sb, compiling... the browser opened... Storybook loading... loading... BOOM!💓 We got it! Storybook loaded with all the components 🎉 Easy ha? 😉

Summary

If you have the same configuration as me then:

remove config.js
create manager.js to load your theme
in your main.js load stories and webpack configuration
add babel-loader to your webpack configuration

More info: Migration documentation and Storybook configuration

Thanks for reading, comments are welcome.

Image by Antonios Ntoumas from Pixabay

Easy text management in SPAs

Olek — Thu, 10 Sep 2020 16:27:34 +0000

For so many years I've seen a lot of different applications and different approaches to managing texts in SPAs. At the beginning, the most used method was just hardcoded string in JS or HTML :_D, but step by step some better methods appeared. Definition of constants at the top of the file where the variables will be used, creation of the constants/resources file in the component/feature folder and importation of constants for the usage, and the one I like most is the simple creation of locale folder with en-us.js inside which contains all the text strings used in the app.
So in this post, I'm gonna focus on the last method because from my point of view it has a lot of benefits.

just one import, forget to import each used string
all the text strings you define can be reused around the app most of the IDEs have an indexation, so with just click on the variable you get directly to its definition
you have everything in the same place
easy to maintain
easy to translate the app to any language

The mess could come on the definition of constants, so let's talk about it.

The content of our en-es.js will be a simple exposed object.

export const locale = {awesome: 'Awesome'};

Good name for the thing will save much time in the future.

People see naming as a simple thing. Just write the first idea that comes to your mind, because there is no naming convention or even if there is, its easy to get distracted one day and just invent a new creation of name and so on... So the naming is probably the hardest thing you will find in this article :)

A lot of times I just created a file and for me, it was obvious the naming, but not for the others, and more when the file gets bigger and you have some troubling cases that you have never had before, so at that point, you just decide something because you need to hurry with the delivering... The seed of monster creation has been planted! Baaad! Bad! You hope one day you will fix it, but then that day never comes... at this point, my suggestion is to not hurry up and check at least the most used cases.

So let's check them. I tried to cover all the cases I imagined, but probably on the way, you will find some more.

const locale = {
WhateverXX = 'Whatever %0', //XX is the indication that this string has a parameter (you will need a method to replace it)
WhateverXXandXX = 'Whatever %0 and %1', //same case with more parameters
SuperLongStringTextXX = 'Super long long long %0 very long string', //another example
WhateverYouDoUserUnderscoreNameColonXX: 'Whatever you do user_name: XX', // "Underscore" and "Colon" inside the name, for some specific cases you can use it, but I wouldn't do it in long text, so it is a matter of common sense
UserName = 'User name', //for simple text
UserNameLC = 'user name', //LC an indication that the whole string is in lower case
//UserNameLowercase = 'user name', //another way to do the same
UserNameCC = 'User Name', //CC - whole string in camel case
UserNameUC = 'USER NAME', //UC - whole string in upper case
UserNameColon = 'User name:', //Colon an indication of colon at the end, common usage in forms
UserNameCCColon = 'User Name:', // or you can use UserName and in the use add ":"
AboutUsText1 = 'Cool very long paragraph about us', // you can use descriptive name for some long texts
AboutUsText2 = 'Another awesome paragraph about us', // another example
IfyouHaveASuperLongTextIDontKnowWhatIsTheProblemOnUseItInThisWay = '...', //its not a bad idea to use long text, but its quite ugly and is too descriptive, so if you change it, then you will have to replace all the usages in the app and it is painful. I suggest you to use the definition above, its easier to maintain.
};

Right now I'm working on a project where we had strings files defined in almost every component's folder and a bunch of hardcoded strings in the APP. So we started the migration some months ago and right now we have already 1k+ strings ordered alphabetically and our team is happier :)

This is basically all, I hope you have gained something useful. Comments are welcome.