Shared Frontend Components for SRF applications
- Rollup
- Sass
- TypeScript
- Storybook to help you create and show off your components
Run npm install srf-feathers --save
in your project root.
Import and use components in your code:
import { Button } from "srf-feathers";
const MyComponent = () => (
<div>
<Button />
</div>
);
Example using Webpack:
module.exports = {
...,
resolve: {
alias: {
"@Feathers": path.resolve(__dirname, "node_modules/srf-feathers/build")
},
extensions: [".scss"],
module: {
rules: [
{
test: /\.(scss)$/i,
use: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"],
}
]
}
}
}
Import Feathers Modules in your stylesheet:
@use "@Feathers/foundation/breakpoints";
@use "@Feathers/foundation/colors";
@use "@Feathers/foundation/fonts";
@use "@Feathers/foundation/globals";
@use "@Feathers/foundation/mixins";
@use "@Feathers/foundation/variables";
Importing the font module requires to add the resolve-url-loader to your webpack config. It allows webpack to resolve the relative paths of fonts. Check the webpack documentation for more details on this issue.
In case this solution doesn't work for your usecase. It is possible to adjust the path of the fonts by overwriting the $font-path
variable:
@use "@Feathers/fonts" with (
$font-path: "/path/to/fonts/"
);
- check out srf-feathers
git clone [email protected]:mmz-srf/feathers.git
- enter directory where you installed it, e.g.
cd feathers
- install dependencies
npm install
ℹ️ If you have to update the secrets (e.g. CHROMATIC_PROJECT_TOKEN
for deployment to chromatic or NPM_TOKEN
for deploying on NPM), you can change them on https://github.com/mmz-srf/feathers/settings/secrets/actions
npm run build
To run a live-reload Storybook server on your local machine:
npm run storybook
srf-feathers
is published on NPM. A github workflow is used to auto-publish on NPM when the version number in package.json
is increased on the main branch.
In case this fails, publish via npm publish
(you must be logged into npm in the CLI).
There is a handy NodeJS util file under util
called create-component.js
. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:
npm run generate YourComponentName
This will generate:
/src
/YourComponentName
YourComponentName.tsx
YourComponentName.stories.tsx
YourComponentName.types.ts
YourComponentName.scss
The default templates for each file can be modified under util/templates
.
index.ts
exports if you want the library to export the component!
While developing, it is useful to not have to publish every little change to NPM before you can use it in your project. For this, it's possible to "install" a local version of srf-feathers in your project with
npm i --save relative/path/to/feathers/repo
If, for example, your project's repository is in the same folder you checked out srf-feather, you can run the following command in your project's root folder:
npm i --save ../feathers
node_modules
.
Alternatively to installing a local version of feathers you can also install it from a GitHub branch. This option is useful if you want to provide a deployable review application for testing:
npm i --save mmz-srf/feathers#my-branch
yarn add srf-feathers@https://github.com/mmz-srf/feathers.git#my-branch
For a smoother experience, a collection of the most used commands has been added to a dev-script in /bin/feathers-dev
. List the available commands with
./bin/feathers-dev help
ℹ️ Pro tip: add alias feathers-dev='path/to/feathers/bin/feathers-dev'
to your ~/.zshrc
or equivalent to be able to type feathers-dev
!