Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DM-40259: Update storybook to v7 and adopt pnpm #142

Merged
merged 12 commits into from
Aug 1, 2023
8 changes: 6 additions & 2 deletions .github/workflows/chromatic.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,15 @@ jobs:
with:
fetch-depth: 0 # get full Git history

- uses: pnpm/action-setup@v2
with:
version: 8

- name: Set up node
uses: actions/setup-node@v3
with:
node-version-file: '.nvmrc'
cache: 'npm'
cache: 'pnpm'

- name: Authenticate GitHub Packages
run: |
Expand All @@ -29,7 +33,7 @@ jobs:
NPM_PKG_TOKEN: ${{ secrets.GITHUB_TOKEN }}

- name: Install npm packages
run: npm ci
run: pnpm install

- name: Publish to Chromatic
if: github.ref != 'refs/heads/main'
Expand Down
15 changes: 9 additions & 6 deletions .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ jobs:
id: node_version
run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)

- uses: pnpm/action-setup@v2
with:
version: 8

- name: Authenticate GitHub Packages
run: |
echo "//npm.pkg.github.com/:_authToken=${NPM_PKG_TOKEN}" > ~/.npmrc
Expand All @@ -51,18 +55,18 @@ jobs:
uses: actions/setup-node@v3
with:
node-version: ${{ steps.node_version.outputs.NODE_VERSION }}
cache: 'npm'
cache: 'pnpm'

- name: Install npm packages
run: npm ci
run: pnpm install

- name: Lint
run: |
npm run lint
npm run format:check
pnpm run lint
pnpm run format:check

- name: Build site
run: npm run build
run: pnpm run build

docker:
needs:
Expand Down Expand Up @@ -109,7 +113,6 @@ jobs:
# Only push tags or ticket branches
push: true
tags: |
lsstsqre/squareone:${{ steps.vars.outputs.tag }}
ghcr.io/lsst-sqre/squareone:${{ steps.vars.outputs.tag }}
target: production
cache-from: type=gha
Expand Down
17 changes: 8 additions & 9 deletions .storybook/main.js → .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
const path = require('path');
import type { StorybookConfig } from '@storybook/nextjs';

module.exports = {
const config: StorybookConfig = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
{
name: 'storybook-addon-next',
options: {
nextConfigPath: path.resolve(__dirname, '../next.config.js'),
},
},
],
framework: '@storybook/react',
framework: '@storybook/nextjs',
core: {
builder: '@storybook/builder-webpack5',
},
staticDirs: ['../public'],
docs: {
autodocs: true,
},
};

export default config;
7 changes: 7 additions & 0 deletions .vscode/tasks.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@
"isDefault": true
}
},
{
"type": "npm",
"script": "lint",
"problemMatcher": [],
"label": "npm: lint",
"detail": "next lint"
},
{
"type": "npm",
"script": "storybook",
Expand Down
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# Change log

## Unreleased

### Other changes

- Migrated to `pnpm` from `npm` for package management.
- Upgrade to Storybook 7.
- Add development set up documentation to the squareone.lsst.io site.

## 0.10.0 (2023-03-27)

### New features
Expand Down
10 changes: 6 additions & 4 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,18 @@ WORKDIR /app

RUN echo "//npm.pkg.github.com/:_authToken=${GH_PKG_TOKEN}" > ~/.npmrc

COPY package.json package-lock.json .npmrc ./
RUN npm ci
COPY package.json pnpm-lock.yaml .npmrc ./
RUN npm install -g pnpm
RUN pnpm install

# Stage 2: Build application ==================================================
from node:16-alpine as builder
FROM node:16-alpine as builder

WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build
RUN npm install -g pnpm
RUN pnpm run build

# Stage 3: Install pre-built app and deps for production ======================
FROM node:16-alpine as production
Expand Down
17 changes: 17 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Squareone

[![GitHub Actions](https://github.com/lsst-sqre/squareone/actions/workflows/ci.yaml/badge.svg)](https://github.com/lsst-sqre/squareone/actions/) [![Documentation](https://img.shields.io/badge/squareone-lsst.io-brightgreen.svg)](https://squareone.lsst.io)

Squareone is the home page for the [Rubin Science Platform](https://data.lsst.cloud). It's where you start on your journey to use the RSP's portal, notebooks, and APIs to do science with Rubin/LSST data. [Squareone is deployed with Phalanx](https://phalanx.lsst.io/applications/squareone/).

**Documentation for developers and operators:** https://squareone.lsst.io

## Technology stack

- The site is built with [Next.js](https://nextjs.org) and [React](https://reactjs.org). Next.js allows the site to be dynamically configured for different Science Platform deployments.

- Styling is done through [styled-components](https://styled-components.com) (along with global CSS).

## Development

To set up your development environment and run the site locally, see Squareone's development documentation: https://squareone.lsst.io/dev/
125 changes: 0 additions & 125 deletions README.rst

This file was deleted.

13 changes: 13 additions & 0 deletions docs/_rst_epilog.rst
Original file line number Diff line number Diff line change
@@ -1,2 +1,15 @@

.. _CommonMark: https://commonmark.org/
.. _MDX: https://mdxjs.com
.. _Next.js: https://nextjs.org
.. _next lint: https://nextjs.org/docs/basic-features/eslint
.. _nvm: https://nvm.sh
.. _Phalanx: https://phalanx.lsst.io
.. _pnpm: https://pnpm.io
.. _Prettier: https://prettier.io/
.. _React: https://reactjs.org
.. _Rubin Observatory: https://www.lsst.org
.. _Semaphore: https://github.com/lsst-sqre/semaphore
.. _Storybook: https://storybook.js.org/
.. _styled-components: https://styled-components.com
.. _Squareone repository: https://github.com/lsst-sqre/squareone
76 changes: 76 additions & 0 deletions docs/dev/development-tasks.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
#################
Development tasks
#################

Once you have a working development environment (see :doc:`set-up`), you can run tasks to help you develop and test the project.
This page outlines those development tasks.

Start the development server
============================

.. code-block:: sh

pnpm dev

View the site at http://localhost:3000.
This site auto-updates when running with the development server.

`API routes <https://nextjs.org/docs/api-routes/introduction>`__ are accessed on ``http://localhost:3000/api/*``.
The ``pages/api`` directory is mapped to ``/api/*``.
Files in this directory are treated as API routes instead of React pages.
The purpose of the ``pages/api/dev`` endpoints are to mock external services in the RSP; see the re-writes in :file:`next.config.js`.

Start the Storybook server
==========================

Storybook_ is an environment for documenting and designing React components.
You can start up Squareone's Storybook development site::

.. code-block:: bash

pnpm storybook

Manual linting and formatting
-----------------------------

Typically linting is run by your IDE while you develop and again when you commit code (via Husky).
You can also manually lint and format code.

Lint JavaScript via `next lint`_:

.. code-block:: bash

pnpm lint

Check formatting with Prettier_:

.. code-block:: bash

pnpm format:check

Or automatically fix files with Prettier_:

.. code-block:: bash

pnpm format

Create a production build
=========================

You can create a production build of the application, which can be a useful check of a process that typically runs inside the Docker image build:

.. code-block:: bash

npm run build

You can serve the production build locally:

.. code-block:: bash

npm run serve

VS Code tasks
=============

Many of these tasks are also available as VS Code tasks.
From the VS Code command pallet run ``Tasks: Run Task`` and select the task you want to run.
5 changes: 5 additions & 0 deletions docs/dev/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,8 @@ Developer guide

This documentation will help you contribute to the Squareone code.
If you are an admin looking to deploy and operate Squareone on the Rubin Science Platform, the :doc:`deployment guide <../deployment/index>` is the right place to start.

.. toctree::

set-up
development-tasks
Loading
Loading