designsystem | Kirby Design System is a UX Component library implementing | Content Management System library

I am using Vue Design System in order reuse components and styles in multiple Vue applications.

I'm trying to include a global CSS file in the DS export, but I can not get this to show in the app. Any tips ?

So far i have tried this which does not seem to load the required file.

I have download and installed NPM package,but i am not able to access css of installed package. I am using this package.can anyone help me out ? as per the documentation i need to add following css files.

I have the following web page:

http://designsystem.foamfactory.io/current/components/preview/main.html

It's basically a set of text, along with a couple of SVG images. In order to get the effect that I want (the hex bolts should be overlaid in a specific position on the text), I use absolute positioning within a relatively positioned container.

The actual HTML code and CSS are fairly simple, and outlined in this codepen:

https://codepen.io/jwir3/pen/ZEzRKyz

The associated HTML is:

For my specific project, I need to control the minification of my CSS and only minify certain files. I am very close to a working solution using OptimizeCSSAssetsPlugin where I use the assetNameRegExp option to choose the CSS files I want to minify.

I have spent a while now trying to figure out why all my other CSS files are still being minified. It turns out that sass-loader will always minify your CSS when in production mode whether you want it to or not.

Here is my full webpack.config.js.

I have a capistrano task I am trying to make into a gem so I can use it in multiple projects. The repository for this gem is located here:

https://github.com/FoamFactory/capistrano-monorepo-assets/tree/jwir3/initial-commit

I essentially used https://github.com/sheharyarn/capistrano-rake as a basis for creating my gem.

I've tested the actual rake script, but I'm actually not importing it into the project right now. Instead, I'm trying to get it to actually import the gem successfully. When I add the gem to my Gemfile as such:

My repository is set up similar to the following:

I'm currently developing two applications in two different projects: a React component library to be used as a design system, and a React webapp to render pages using components from design system.

Inside my webapp, I import the components as following:

import { Button } from 'designsystem'

Inside the package.json of designsystem, my main entry points to /src/index.js where all my components are exported as a ES6 module. When I'm developing that's ok, because when I update a component in designsystem it reflects on the webapp and that's the desired behaviour.

Although when I try to build my webapp, it only works if I point the main entry of designsystem to the dist folder, which contains a bundled file with all the components as UMD. This way, I can't see the changes of the components inside my webapp unless if I build everything again.

I already tried to conditionally return the components module or dist content in /src/index.js in order to point to the correct content. But nothing worked.

My question is: Is there a way to conditionally change the main entry in package.json? If not, is there another solution for this?

EDIT: When the main is pointing to the source, I can work fine with it using npm link. My problem comes when I try to build the parent, unless I switch the main to the build folder.

I would like my design-systems-utils module to include Typescript typings even though the source code is not written using Typescript (I have seen that others have done this).

I have already attempted this here, but it does not work. By the way, my module exports a class...

I have two components, parent and child. The parent keeps track of the audio player component (the child is the player) and what segment the player is playing, e.g. segment 1 might be the first 34 seconds followed by the second segment until 215 seconds, etc.

My parent component renders the Player component and passes a bound function to the Player so the Player can update the parent with the current time of the player so the parent can figure out which segment should be highlighted.

The problems are that (1) (major problem) once play button is clicked and it plays, or the user skips, beyond the first segment break then the state of the parent updates but the Player is unmounted, causing the MediaElement to be removed; (2) (minor problem) when initially loading the page, the Player unmounts, followed by the parent mounting, followed by the Player unmounting and mounting again. I believe they're related.

parent: