Styleguide for the Cinémathèque websites (Live and Main)

1. Anthenticate to GitHub Packages with

   npm login --scope=@OWNER --registry=https://npm.pkg.github.com
   

   Use your GitHub information for Username and Email. For the Password you need to create a new personal access token on Github with these permissions.
2. In the same directory as your package.json file, create or edit an .npmrc file to include the following line:

   @antistatique:registry=https://npm.pkg.github.com
   

3. Install the package with

   yarn add @antistatique/cinematheque-styleguide@latest
   

First of all, you need to have the following tools installed globally on your environment:

• yarn
• node 15

$ yarn install

Start the following commands in parallel (with nicer output):

$ yarn tailwind:start
$ yarn storybook:start

OR (with uglier output)

$ yarn start

And here are all the available commands:

• yarn clean: Purge build packages cache
• yarn tailwind:dev: Build Tailwind project
• yarn tailwind:build: Build Production Tailwind project
• yarn tailwind:watch: Watch and rebuild CSS files
• yarn tailwind:start: Start Tailwind development mode
• yarn storybook:start: Start Storybook
• yarn storybook:build: Build Storybook static deliverable
• yarn modules:build: Build React modules
• yarn start: Start all development processes
• yarn build: Build all deliverables
• yarn build:styleguide: Build styleguide for deployment
• yarn generate: Generate new component (select Blank for ease)

In order to use tailwind dark mode utilities, you need to be aware of the order of your classes. Generally speaking, the first classes should be the main theme state, including the state style (focus, hover, etc.). Then comes the dark theme utilities, such as dark:text-white, and at the end, the dark theme utilities referring to the states, such as dark:hover:text-opacity-5.

Besides, some dark theme utilities don't seem to work if used directly in the className props of your component, but will work if used in a css file with @apply. Not sure why so far, so just be aware of it.

Also, avoid nesting when using dark: in a css file. Because we're using the class mode this can happen :

.my-class {
   .my-nested-class {
      @apply text-black dark:text-white;
   }
}

This would not work because it would create something like (not exactly but it's for comprehension): .my-class .dark .my-nested-class {color: white;}. and .dark is present higher in the dom.

The homepageHero + ImageWall images are ignored in the build folder, because they take too much space.

This means that to update them, we need to modify directly the images on the Drupal (in web/themes/custom/cinematheque/images) besides modifying them here in the styleguide.

1. Authenticate to GitHub Packages
2. Bump the version in package.json
3. Run the following command:

   npm publish