@pathzero/terra v1.1.1

Pathzero Terra

Create stories with Typescript

You can write stories with Typescript as both dev server and storybook server allow it. Start writing stories with this introduction

Add translations to locales files

Translations are ready to go with vue-i18n Add your files to /locales and are you are set.

Scripts

npm install # installs packages
npm run dev  # starts the dev server
npm run build  # run build
npm run serve  # preview build
npm run storybook  # starts storybook
npm run lint     # lint all files
npm run lint:fix # lint and fix all files
npm run format  # run prettier on all files
npm run build
npm run build:lib
npm run build:storybook

Recommended IDE Setup

• VSCode
• Volar Helps with syntax highlighting, TS support, etc.
• i18n Ally Will add inline hints for i18n-ified strings

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from VSCode command palette.

It's recommended to use Volar's "take over mode".

Folder structure

.
├── src
│   ├── assets
│   │   └── fonts, images, and other static assets
│   ├── components
│   │   ├── component-name
│   │   │   └── each component gets its own folder for:
│   │   │       - the component
│   │   │       - the story
│   │   │       - the unit test
│   │   │       - static assets if required
│   │   └── ...
│   ├── locales
│   │   ├── en.json
│   ├── stories
│   │   ├── Any stories not directly related to components
│   │   ├── Introduction.stories.mdx
│   │   ├── Page.stories.js
│   │   ├── assets
│   │   │   └── static assets for stories
│   ├── styles
│   └── types
│       └── shared types go here
├── ...
└── various config files

Generating design tokens

We import design tokens based on the output from a Figma plugin called Figma Tokens. To generate all *.tokens.[css,scss] files run npm run generate-design-tokens.

The imported tokens will have some processing applied to normalize CSS values and generate CSS values for those that are not directly transformed by the Figma Tokens transformer.

General notes of interest

NODE_OPTIONS=--openssl-legacy-provider

When using Node.JS 18, you'll need this on Storybook related builds. They use Vite as the builder, however some things still use Webpack in the background. This option is required for Node.JS 18 as it uses a newer OpenSSL version with breaking changes that causes "Error: error:0308010C:digital envelope routines::unsupported" See webpack/webpack#14532 for more details. Storybookjs/builder-vite#414 notes that it should be fixed in Storybook 7.